/* ============================================================
   JETTY DESIGN SYSTEM — TOKENS
   ============================================================ */

:root {
  /* ── Brand: Harbor (default) — navy + amber ───────────────── */
  --harbor-ink-50:  #f4f5f9;
  --harbor-ink-100: #e6e9f1;
  --harbor-ink-200: #c8cfdf;
  --harbor-ink-300: #97a3bf;
  --harbor-ink-400: #6273a0;
  --harbor-ink-500: #3d4f82;
  --harbor-ink-600: #283766;
  --harbor-ink-700: #1a2750;
  --harbor-ink-800: #111c3f;
  --harbor-ink-900: #0a1230;
  --harbor-ink-950: #050a1f;

  --harbor-amber-50:  #fef8ec;
  --harbor-amber-100: #fcecc4;
  --harbor-amber-200: #f9d987;
  --harbor-amber-300: #f5c14a;
  --harbor-amber-400: #f0a91f;   /* Pelly bill */
  --harbor-amber-500: #d88f0e;
  --harbor-amber-600: #b3700a;
  --harbor-amber-700: #8a530b;

  --harbor-bone-50:  #faf8f3;
  --harbor-bone-100: #f3efe4;
  --harbor-bone-200: #e8e1ce;

  /* ── Semantic — light mode (default) ─────────────────────── */
  --bg:           #fbfaf6;
  --bg-elevated: #ffffff;
  --bg-sunken:   #f3efe4;
  --bg-inverse:  #0a1230;

  --surface:        #ffffff;
  --surface-muted:  #f7f5ee;
  --surface-strong: #eee9d9;

  --border:        #e7e2d0;
  --border-strong: #c8cfdf;
  --border-focus:  #1a2750;

  --fg:           #0a1230;     /* primary text */
  --fg-muted:     #3d4f82;     /* secondary text */
  --fg-subtle:    #6273a0;     /* tertiary text */
  --fg-faint:     #97a3bf;     /* disabled/placeholder */
  --fg-inverse:   #fbfaf6;

  --accent:       #f0a91f;     /* Pelly amber */
  --accent-fg:    #0a1230;
  --accent-soft:  #fcecc4;

  --success:      #2f7d4a;
  --warning:      #c08407;
  --danger:       #b03a2e;
  --info:         #1a2750;

  /* Button semantics */
  --btn-run:            var(--success);    /* run / execute — shares the success green */
  --btn-run-fg:         #fbfaf6;
  --btn-destructive:    var(--danger);
  --btn-destructive-fg: #fbfaf6;
  --btn-secondary-bg:   #0a1230;           /* solid neutral secondary — navy on light */
  --btn-secondary-fg:   #fbfaf6;

  /* ── Typography (matched to Spot / jetty.io) ─────────────── */
  --font-display: "Outfit", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-sans:    "Nunito Sans", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", "Fira Code", "SF Mono", Monaco, ui-monospace, monospace;

  --text-2xs:    11px;
  --text-xs:     12px;
  --text-sm:     13px;
  --text-base:   15px;
  --text-md:     17px;
  --text-lg:     20px;
  --text-xl:     24px;
  --text-2xl:    32px;
  --text-3xl:    44px;
  --text-4xl:    60px;
  --text-5xl:    80px;
  --text-6xl:    112px;

  --leading-tight:  1.05;
  --leading-snug:   1.18;
  --leading-normal: 1.45;
  --leading-loose:  1.65;

  --tracking-tight:  -0.025em;
  --tracking-snug:   -0.012em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.01em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Spacing (4px grid, with editorial extras) ───────────── */
  --space-0:    0;
  --space-px:   1px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;
  --space-40:   160px;

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs: 0 1px 0 rgba(10, 18, 48, 0.04);
  --shadow-sm: 0 1px 2px rgba(10, 18, 48, 0.06), 0 1px 1px rgba(10, 18, 48, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 18, 48, 0.08), 0 1px 2px rgba(10, 18, 48, 0.04);
  --shadow-lg: 0 12px 32px rgba(10, 18, 48, 0.10), 0 2px 6px rgba(10, 18, 48, 0.05);
  --shadow-xl: 0 24px 64px rgba(10, 18, 48, 0.16), 0 4px 12px rgba(10, 18, 48, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  --ring-focus: 0 0 0 3px rgba(240, 169, 31, 0.35);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-prose: 680px;
  --container-narrow: 880px;
  --container:        1140px;
  --container-wide:   1320px;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    420ms;
  --dur-slower:  700ms;
}

/* ── Dark mode ───────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:           #050a1f;
  --bg-elevated:  #0a1230;
  --bg-sunken:    #02050f;
  --bg-inverse:   #fbfaf6;

  --surface:        #0a1230;
  --surface-muted:  #111c3f;
  --surface-strong: #1a2750;

  --border:        #1a2750;
  --border-strong: #283766;
  --border-focus:  #f0a91f;

  --fg:           #f3efe4;
  --fg-muted:     #c8cfdf;
  --fg-subtle:    #97a3bf;
  --fg-faint:     #6273a0;
  --fg-inverse:   #0a1230;

  --accent:       #f5c14a;
  --accent-fg:    #050a1f;
  --accent-soft:  #1a2750;

  --btn-secondary-bg: #1a2750;   /* raised ink surface on dark (navy would vanish) */

  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --ring-focus: 0 0 0 3px rgba(245, 193, 74, 0.35);
}

/* ── Palette variants (apply via [data-palette="..."] on <html>) ── */

/* Ink — deep indigo + signal yellow, more saturated */
[data-palette="ink"] {
  --bg: #f7f5f0;
  --bg-elevated: #ffffff;
  --bg-sunken: #efebe0;
  --surface: #ffffff;
  --surface-muted: #f3efe4;
  --surface-strong: #e6dfc8;
  --border: #ddd4ba;
  --fg: #161b3a;
  --fg-muted: #3a4374;
  --accent: #ffd23a;
  --accent-fg: #161b3a;
  --accent-soft: #fff3b8;
}
[data-theme="dark"][data-palette="ink"] {
  --bg: #08091c;
  --bg-elevated: #11132e;
  --surface: #11132e;
  --surface-muted: #181b3e;
  --border: #252a55;
  --fg: #f3efe4;
  --accent: #ffd23a;
  --accent-fg: #08091c;
}

/* Tide — navy + sage + sand */
[data-palette="tide"] {
  --bg: #f1efe6;
  --bg-elevated: #fbfaf6;
  --bg-sunken: #e6e2d2;
  --surface: #fbfaf6;
  --surface-muted: #ebe7d8;
  --surface-strong: #d8d3bd;
  --border: #cbc6ad;
  --fg: #14233a;
  --fg-muted: #4a5d6e;
  --accent: #6b8e6e;
  --accent-fg: #fbfaf6;
  --accent-soft: #d4ddc8;
}
[data-theme="dark"][data-palette="tide"] {
  --bg: #0c1623;
  --bg-elevated: #14233a;
  --surface: #14233a;
  --surface-muted: #1d3047;
  --border: #2a3f56;
  --fg: #ebe7d8;
  --accent: #97b591;
  --accent-fg: #0c1623;
}

/* Lighthouse — high contrast monochrome + saturated yellow */
[data-palette="lighthouse"] {
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-sunken: #f5f5f5;
  --surface: #ffffff;
  --surface-muted: #f5f5f5;
  --surface-strong: #e8e8e8;
  --border: #e0e0e0;
  --fg: #000000;
  --fg-muted: #404040;
  --fg-subtle: #707070;
  --accent: #ffcc00;
  --accent-fg: #000000;
  --accent-soft: #fff5cc;
}
[data-theme="dark"][data-palette="lighthouse"] {
  --bg: #000000;
  --bg-elevated: #0a0a0a;
  --bg-sunken: #000000;
  --surface: #0a0a0a;
  --surface-muted: #161616;
  --surface-strong: #222222;
  --border: #262626;
  --fg: #ffffff;
  --fg-muted: #b8b8b8;
  --accent: #ffcc00;
  --accent-fg: #000000;
}

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 100, "YTLC" 500;
  font-feature-settings: "rlig" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--accent-fg); }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--space-12) 0;
}