:root{
  /* ── Base palette — sampled from the guud mood wordmark ───────────── */
  --sea-50:#EAF4FD;--sea-100:#D2E8FA;--sea-200:#A7D0F4;--sea-300:#74B4EC;
  --sea-400:#3B95E5;/* logo smile */--sea-500:#2280D6;--sea-600:#1668B4;
  --sea-700:#11528E;--sea-800:#0E3E6B;--sea-900:#0B2A45;

  --sand-50:#FDFAF5;--sand-100:#FBF3E8;--sand-200:#F8E9D7;
  --sand-300:#F1D3B1;/* logo letterforms */--sand-400:#E5BC8E;
  --sand-500:#CFA06B;--sand-600:#B37830;/* palm trunk */--sand-700:#8C5D24;

  --palm-300:#9BD374;--palm-400:#68B43C;/* palm fronds */--palm-500:#4F9A28;--palm-600:#3B7A1C;

  --ink-900:#101A22;--ink-700:#33454F;--ink-500:#5E7180;--ink-300:#93A4AF;--ink-100:#DCE3E8;
  --paper:#FFFFFF;--paper-warm:#FDFAF5;

  --coral-400:#F2704F;--coral-500:#DE5231;/* alerts, sunset accents */
  --sun-300:#FFD166;--sun-400:#F5B942;

  /* ── Semantic aliases — always prefer these in components ─────────── */
  --brand:var(--sea-400);--brand-strong:var(--sea-500);--brand-deep:var(--sea-900);
  --brand-soft:var(--sea-100);--brand-tint:var(--sea-50);
  --accent-sand:var(--sand-300);--accent-sand-soft:var(--sand-200);--accent-palm:var(--palm-400);

  --text-body:var(--ink-700);--text-heading:var(--sea-900);--text-muted:var(--ink-500);
  --text-faint:var(--ink-300);--text-on-brand:#FFFFFF;--text-on-sand:var(--sea-900);
  --text-link:var(--sea-500);--text-link-hover:var(--sea-700);

  --surface-page:var(--paper-warm);--surface-card:var(--paper);--surface-sunk:var(--sand-100);
  --surface-brand:var(--sea-400);--surface-brand-soft:var(--sea-50);
  --surface-sand:var(--sand-200);--surface-deep:var(--sea-900);
  --surface-overlay:rgba(11,42,69,.55);

  --border-hairline:var(--ink-100);--border-soft:var(--sand-200);
  --border-strong:var(--sea-200);--border-focus:var(--sea-400);

  --state-success:var(--palm-500);--state-success-soft:#E8F5DF;
  --state-warning:var(--sun-400);--state-warning-soft:#FEF3DA;
  --state-danger:var(--coral-500);--state-danger-soft:#FCE7E0;
  --state-info:var(--sea-400);--state-info-soft:var(--sea-50);

  /* Sea-condition scale used by planner + tide/weather UI */
  --sea-calm:var(--palm-400);--sea-moderate:var(--sun-400);--sea-rough:var(--coral-500);--sea-closed:var(--ink-300);
}