/* tokens.css — Travel Lote design tokens
   Dark-first (default) + light override. Semantic names; values swap per theme.
   Palette: slate-neutral base + sunset/terracotta accent (wanderlust, utility-clean).
   Rules: never pure #000/#FFF; every text/bg pair targets WCAG AA 4.5:1;
   in dark, elevation = lighter surface + border (shadows don't read on dark). */

:root {
  /* ---- Color: DARK is the default ---- */
  --bg: #0F1216;
  --surface: #171B21;
  --surface-2: #1F242C;
  --ink: #E8EAED;
  --muted: #9BA3AE;
  --line: #2A313A;

  --accent: #FF8A4C;          /* sunset/terracotta */
  --accent-hover: #FF9D67;
  --accent-ink: #1A1205;      /* text on accent fills */
  --accent-soft: rgba(255, 138, 76, 0.14);

  --ok: #46C08D;
  --warn: #F2B33D;
  --bad: #F26D6D;
  --ok-soft: rgba(70, 192, 141, 0.14);
  --warn-soft: rgba(242, 179, 61, 0.14);
  --bad-soft: rgba(242, 109, 109, 0.14);

  --focus: #7FB4FF;           /* visible focus ring */

  /* ---- Elevation (dark: border-led; one soft shadow for popovers) ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, .45);

  /* ---- Typography ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-display: clamp(2rem, 1.4rem + 2.4vw, 2.5rem); /* tool H1 */
  --t-h2: 1.5rem;
  --t-h3: 1.125rem;
  --t-body: 1rem;            /* never below 16px */
  --t-label: 0.875rem;
  --t-caption: 0.8125rem;
  --t-numeric: clamp(2.25rem, 1.6rem + 2vw, 3rem);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ---- Radius ---- */
  --radius: 14px;            /* cards (matches 16px iframe corner) */
  --radius-sm: 8px;          /* inputs/buttons */
  --radius-pill: 999px;      /* status chips */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;

  /* ---- Layout ---- */
  --sidebar-w: 256px;
  --topbar-h: 60px;
  --content-max: 880px;      /* embed width — keep; each tool is designed for this */
  --content-max-site: clamp(900px, 84vw, 1120px); /* wider standalone shell, fills desktop */

  color-scheme: dark;
}

/* ---- LIGHT theme: via manual toggle OR system preference ---- */
:root[data-theme="light"] {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface-2: #F2F1ED;
  --ink: #16191D;
  --muted: #5B636E;
  --line: #E4E2DC;

  --accent: #E8612C;
  --accent-hover: #D4521F;
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(232, 97, 44, 0.10);

  --ok: #1F9D6B;
  --warn: #C9871A;
  --bad: #D23F3F;
  --ok-soft: rgba(31, 157, 107, 0.10);
  --warn-soft: rgba(201, 135, 26, 0.12);
  --bad-soft: rgba(210, 63, 63, 0.10);

  --focus: #1F6FEB;

  --shadow-1: 0 1px 2px rgba(16, 19, 29, .06), 0 4px 12px rgba(16, 19, 29, .06);
  --shadow-2: 0 8px 28px rgba(16, 19, 29, .12);

  color-scheme: light;
}

/* Honor system preference when the user hasn't explicitly chosen a theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --bg: #FAFAF8;
    --surface: #FFFFFF;
    --surface-2: #F2F1ED;
    --ink: #16191D;
    --muted: #5B636E;
    --line: #E4E2DC;
    --accent: #E8612C;
    --accent-hover: #D4521F;
    --accent-ink: #FFFFFF;
    --accent-soft: rgba(232, 97, 44, 0.10);
    --ok: #1F9D6B;
    --warn: #C9871A;
    --bad: #D23F3F;
    --ok-soft: rgba(31, 157, 107, 0.10);
    --warn-soft: rgba(201, 135, 26, 0.12);
    --bad-soft: rgba(210, 63, 63, 0.10);
    --focus: #1F6FEB;
    --shadow-1: 0 1px 2px rgba(16, 19, 29, .06), 0 4px 12px rgba(16, 19, 29, .06);
    --shadow-2: 0 8px 28px rgba(16, 19, 29, .12);
    color-scheme: light;
  }
}