/* ==========================================================================
   Outpost — DESIGN TOKENS (shared DNA across all three properties)
   --------------------------------------------------------------------------
   Brand-AGNOSTIC primitives (type scale, spacing, motion) + the SEMANTIC
   CONTRACT every component reads. Per-brand palettes/fonts/density live in each
   property's theme.css, which overrides the --c-* / --font-* / --density vars
   at the bottom. Components must read ONLY the semantic vars so a theme reskins
   everything for free. This is the "one system, three skins" backbone.
   ========================================================================== */

:root {
  /* --- Type ---------------------------------------------------------------
     ONE shared display face is the single strongest family cue — keep
     --font-display identical across all three themes; let --font-body flex. */
  /* Locked from the mockups. Load via the Google Fonts <link> in each page head:
     Fraunces (9..144 opsz, ital) + Source Serif 4 (8..60 opsz, ital). */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;  /* headlines, wordmark, numerals — the family signature */
  --font-serif: "Source Serif 4", Georgia, serif;                 /* reading / body / descriptions */
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;    /* nav, buttons, eyebrows, tags */
  --font-body: var(--font-serif);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* fluid type scale (shared vertical rhythm) */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.90vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.50vw, 2.75rem);
  --step-4:  clamp(2.07rem, 1.70rem + 2.40vw, 3.75rem);
  --step-5:  clamp(2.49rem, 2.00rem + 3.60vw, 5.00rem);

  /* --- Space / size (shared) --------------------------------------------- */
  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem;
  --space-s: 1rem;      --space-m: 1.5rem;   --space-l: 2rem;
  --space-xl: 3rem;     --space-2xl: 4.5rem; --space-3xl: 7rem;

  --radius-s: 0.4rem; --radius-m: 0.75rem; --radius-l: 1.25rem; --radius-pill: 999px;
  --measure: 65ch;       /* reading-column cap */
  --container: 72rem;    /* max site width */

  /* --- Motion (shared feel) ---------------------------------------------- */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.15s; --dur: 0.25s; --dur-slow: 0.4s;

  /* ========================================================================
     SEMANTIC CONTRACT — the ONLY vars components should reference.
     theme.css overrides these per brand. Defaults below = a neutral light
     skin so the system renders before any theme loads.
     ======================================================================== */
  --c-bg: #ffffff;            /* page background */
  --c-surface: #f3f3f1;       /* cards / raised panels */
  --c-ink: #16181d;           /* primary text */
  --c-ink-dim: #565a63;       /* secondary text */
  --c-gold: #f2b43a;          /* the SHARED beacon/lantern hue — present in every
                                 skin (the family constant); see the mark SVG */
  --c-accent: #cf6b47;        /* per-skin accent (themes override): umbrella
                                 terracotta, oops coral, onward pink→purple */
  --c-accent-ink: #16181d;    /* text/!icon color that sits ON --c-accent */
  --c-line: rgba(0, 0, 0, 0.12);
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.12);

  --density: 1;               /* themes scale padding & leading: kids looser
                                 (>1), umbrella tighter (<1) */

  color-scheme: light;
}