/* ==========================================================================
   tokens.css — Design system primitives (single source of truth)
   Project: nomadentry.io (NomadEntry)
   Palette direction: "Departure Board, Plain English" — ink navy, cool paper,
   stamp gold, route green. Token NAMES are preserved from the original build
   so every existing page adopts the new palette without markup changes:
   the "primary" scale now carries the ink-navy family, "accent" carries the
   stamp-gold family, and the new --color-ink/paper/stamp/route tokens drive
   the redesigned components.
   ========================================================================== */

:root {
  /* ---- Signature palette (new) -------------------------------------- */
  --color-ink:       #14213D;
  --color-ink-2:     #1b2c4f;
  --color-paper:     #F2F5F3;
  --color-stamp:     #C1791E;
  --color-stamp-ink: #9a5f13;
  --color-route:     #2C6E62;
  --color-route-2:   #235a50;

  /* ---- Color: brand → ink-navy family ------------------------------- */
  --color-primary-050: #eef1f6;
  --color-primary-100: #dbe2ee;
  --color-primary-200: #b7c4da;
  --color-primary-300: #8496b8;
  --color-primary-400: #4f6493;
  --color-primary-500: #2d4372;
  --color-primary-600: #24365f;  /* primary structural */
  --color-primary-700: #1b2c4f;
  --color-primary-800: #172642;
  --color-primary-900: #14213D;  /* ink */

  /* ---- Color: accent → stamp-gold family ---------------------------- */
  --color-accent-050: #fbf3e6;
  --color-accent-100: #f4e2c2;
  --color-accent-300: #e2b877;
  --color-accent-500: #cf9436;
  --color-accent-600: #C1791E;  /* stamp */
  --color-accent-700: #9a5f13;

  /* ---- Color: neutral (cool paper grays) ---------------------------- */
  --color-neutral-000: #ffffff;
  --color-neutral-050: #F2F5F3;  /* paper */
  --color-neutral-100: #e9ede9;
  --color-neutral-200: #DCE3DF;  /* hairline border */
  --color-neutral-300: #c4cec7;
  --color-neutral-400: #8a94a0;
  --color-neutral-500: #57616D;  /* muted text */
  --color-neutral-600: #3a444e;
  --color-neutral-700: #1C2430;  /* body text */
  --color-neutral-800: #18202b;
  --color-neutral-900: #14213D;  /* ink headings */

  /* ---- Color: semantic ---------------------------------------------- */
  --color-success-bg: #ecfdf5;
  --color-success-fg: #047857;
  --color-warning-bg: #fbf6ec;   /* stamp-tinted (disclaimers) */
  --color-warning-fg: #9a5f13;
  --color-danger-bg:  #fef2f2;
  --color-danger-fg:  #b91c1c;
  --color-info-bg:    #edf3f1;   /* route-tinted (info notes) */
  --color-info-fg:    #2C6E62;

  /* ---- Semantic aliases (use these in components) ------------------- */
  --bg-page:       var(--color-neutral-050);
  --bg-surface:    var(--color-neutral-000);
  --bg-subtle:     var(--color-neutral-100);
  --text-strong:   var(--color-neutral-900);
  --text-default:  var(--color-neutral-700);
  --text-muted:    var(--color-neutral-500);
  --text-on-brand: var(--color-neutral-000);
  --border-default: var(--color-neutral-200);
  --border-strong:  var(--color-neutral-300);
  --link:          var(--color-route);
  --link-hover:    var(--color-stamp-ink);
  --focus-ring:    var(--color-stamp);

  /* ---- Typography — three deliberate roles -------------------------- */
  /* Self-hosted WOFF2 (@font-face in fonts.css). Each has a graceful fallback
     so pages render correctly before/if the WOFF2 files are present.
       --font-display / --font-mono : IBM Plex Mono — headlines, nav, stats, dates
       --font-serif                 : Lora          — long-form reading copy
       --font-sans                  : Inter         — buttons, meta, forms, chrome */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Code",
               "Roboto Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-mono);

  --fs-xs:   0.8125rem;  /* 13px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.375rem;   /* 22px */
  --fs-xl:   1.75rem;    /* 28px */
  --fs-2xl:  2.25rem;    /* 36px */
  --fs-3xl:  2.75rem;    /* 44px */

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---- Spacing (4px base scale) ------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 5rem;

  /* ---- Radius -------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* ---- Shadow -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);

  /* ---- Layout -------------------------------------------------------- */
  --container-max: 72rem;   /* 1152px */
  --container-narrow: 46rem; /* readable article measure ~736px */
  --header-height: 64px;

  /* ---- Z-index ------------------------------------------------------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 800;
  --z-consent: 900;
  --z-skiplink: 1000;

  /* ---- Motion -------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/* Respect reduced-motion preferences globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}