/* ============================================================================
   TravelMindsAI — system.css
   Canonical design system (synthesis), 2026-06-13.
   Self-hosted brand typefaces (match the brand films): Fraunces (human voice),
   IBM Plex Mono (machine voice), Schibsted Grotesk (UI/body, recedes).
   Tokens are the synthesis palette + 8 branch hues, with an OKLCH upgrade and
   an alias layer mapping the legacy shared.css / styles.css token names so
   existing pages keep working as the system propagates (Phase 3).
   ========================================================================== */

/* ── self-hosted fonts (subset latin woff2, swap) ───────────────────────── */
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/fonts/fraunces-var.woff2") format("woff2");
}
@font-face{
  font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("/fonts/fraunces-var-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/fonts/schibsted-var.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/plex-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/plex-mono-500.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/plex-mono-600.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/plex-mono-700.woff2") format("woff2");
}

/* ── tokens (synthesis) ─────────────────────────────────────────────────── */
:root{
  --navy:#0f1729; --navy-2:#172139; --navy-deep:#0a101f;
  --ink:#f5f1e8; --ink-mute:#c5bfb2; --ink-faint:#84878f;
  --hairline:#39435c;
  --paper:#eeebe0; --paper-2:#e3dfd1;
  --ink-paper:#222b40; --ink-soft:#555f74;
  --teal:#65cdd7; --teal-dim:#3e8e96; --teal-ghost:rgba(101,205,215,.12);
  --coral:#ee7a5c; --coral-bright:#f48a68; --coral-deep:#aa4a30;
  --coral-ghost:rgba(238,122,92,.13);
  --gold:#dfc171; --gold-deep:#977c3c;
  --good:#5fd49a;
  --b-place:#65cdd7; --b-heritage:#dd9b4f; --b-graph:#5fcb8f;
  --b-flights:#7eb5e8; --b-logi:#b598e3; --b-semantic:#e387ae;
  --b-know:#a8d06a; --b-verify:#dfc171;

  /* type roles — re-skinned to the brand-film families */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;          /* human voice */
  --ui:"Schibsted Grotesk",system-ui,-apple-system,sans-serif; /* body / UI    */
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;      /* machine voice */

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --rad:3px; --rad-lg:12px; --maxw:1180px;
  --pr:5px; --pg:17px;

  /* ── alias layer: legacy shared.css / styles.css token names map onto the
     synthesis tokens, so pages not yet migrated keep rendering. Local page
     overrides still win (these are :root defaults only). ─────────────────── */
  --bg:var(--navy); --bg-2:var(--navy-2); --surface:var(--navy-2);
  --surface-2:#1c2452; --line:var(--hairline);
  --line-strong:rgba(245,241,232,.18);
  --text:var(--ink); --muted:var(--ink-mute);
  --accent:var(--coral); --accent-2:var(--teal);
  --radius:14px; --radius-sm:8px; --max:1080px;
  --shadow:0 18px 48px rgba(0,0,0,.45);
}
@supports (color: oklch(0% 0 0)){
  :root{
    --navy:oklch(0.17 0.025 255); --navy-2:oklch(0.21 0.028 254);
    --navy-deep:oklch(0.13 0.024 255);
    --ink:oklch(0.96 0.01 85); --ink-mute:oklch(0.78 0.015 85);
    --ink-faint:oklch(0.58 0.02 250); --hairline:oklch(0.34 0.028 252);
    --paper:oklch(0.94 0.012 90); --paper-2:oklch(0.90 0.014 88);
    --ink-paper:oklch(0.26 0.022 255); --ink-soft:oklch(0.45 0.02 255);
    --teal:oklch(0.78 0.12 195); --teal-dim:oklch(0.55 0.075 200);
    --teal-ghost:oklch(0.78 0.12 195/.12);
    --coral:oklch(0.68 0.18 25); --coral-bright:oklch(0.74 0.17 28);
    --coral-deep:oklch(0.51 0.16 27); --coral-ghost:oklch(0.68 0.18 25/.13);
    --gold:oklch(0.80 0.12 90); --gold-deep:oklch(0.60 0.10 85);
    --good:oklch(0.80 0.14 150);
    --b-place:oklch(0.78 0.12 195); --b-heritage:oklch(0.74 0.13 60);
    --b-graph:oklch(0.76 0.14 150); --b-flights:oklch(0.76 0.10 235);
    --b-logi:oklch(0.72 0.10 300); --b-semantic:oklch(0.70 0.16 345);
    --b-know:oklch(0.82 0.13 125); --b-verify:oklch(0.80 0.12 90);
  }
}