/* =========================================================================
   LUMINA — DESIGN TOKENS  ·  v2.6.4  ·  2026-09-07
   THE SINGLE TOKEN SOURCE. No other file may declare these variables —
   not canonical/lumina.css, not colors_and_type.css, not a kit stylesheet.
   (The showcase keeps an inline COPY for single-file portability; it is
   regenerated from this file, never edited independently.)
   Two-layer system:
     • INVARIANT  = the studio fingerprint (type, space, radius, elevation, motion)
     • SKIN       = per-client (accent ramp + default theme dark/light)
   Default skin = Lumina indigo. Client skins live in skins/ and load
   AFTER this file so they win the cascade (see skins/ams-gold.css).
   Lead with dark; light is always available via [data-theme="light"].
   ========================================================================= */

:root {
  /* ---- TYPE (invariant: Clay personality = editorial serif + clean sans) ---- */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale (1.25 major-third-ish, tuned) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.5rem;    /* 40 */
  --text-4xl:  3.5rem;    /* 56 — display */
  --text-5xl:  4.75rem;   /* 76 — hero display */

  --leading-tight: 1.05;  /* for serif display */
  --leading-snug:  1.3;
  --leading-body:  1.6;

  --tracking-display: 0.5px;  /* serif display likes a hair of positive tracking */
  --tracking-eyebrow: 0.14em; /* uppercase kickers / labels */

  /* ---- SPACE (invariant: 4px base) ---- */
  --space-1: 4px;   --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;

  /* ---- RADIUS (invariant: generous, Clay-soft) ---- */
  --radius-sm: 8px;  --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 22px; --radius-pill: 999px;

  /* ---- MOTION (invariant: ease with a little bounce) ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot */
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms;

  /* ---- ACCENT (SKIN: replace per client brand) ----
     Default skin = Lumina indigo (#7b6cf0) — the system's own hue.
     Client skins override the seven lines below by loading a skins/*.css
     file AFTER tokens.css (e.g. skins/ams-gold.css). */
  --accent-50:  #ecebfd;
  --accent-200: #c4bdf8;
  --accent:     #7b6cf0;   /* primary action */
  --accent-600: #5a49d6;
  --accent-700: #463aa8;
  --accent-contrast: #ffffff;
  --accent-glow: rgba(123, 108, 240, 0.45);
}

/* ===================== DARK (default / lead surface) ===================== */
:root,
[data-theme="dark"] {
  --bg:        #0b0b10;   /* page */
  --surface:   #14141c;   /* cards/panels */
  --surface-2: #1c1c27;   /* raised / inputs */
  --surface-3: #262633;   /* hover */
  --border:    rgba(255,255,255,0.08);
  --border-2:  rgba(255,255,255,0.14);
  --text:      #f4f3f8;
  --text-2:    #b6b4c4;   /* secondary */
  --text-3:    #7d7b8c;   /* hints */
  --glow:      radial-gradient(60% 60% at 50% 0%, var(--accent-glow), transparent 70%);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
  color-scheme: dark;
}

/* ===================== LIGHT (warm-neutral, editorial) ===================== */
[data-theme="light"] {
  --bg:        #faf8f3;   /* warm off-white, NOT #fff */
  --surface:   #ffffff;
  --surface-2: #f4f1ea;
  --surface-3: #ece8df;
  --border:    rgba(20,18,12,0.10);
  --border-2:  rgba(20,18,12,0.18);
  --text:      #1a1820;
  --text-2:    #56535f;
  --text-3:    #8b8895;
  --glow:      radial-gradient(60% 60% at 50% 0%, var(--accent-glow), transparent 70%);
  --shadow-md: 0 6px 20px rgba(40,35,25,0.08);
  --shadow-lg: 0 20px 50px rgba(40,35,25,0.12);
  color-scheme: light;
}

/* ---- semantic status (invariant across themes) ----
   Info gets its OWN hue (GAPS A1): the accent never marks status.
   Calm blue family; contrast proof in both themes pending (see CHANGELOG). */
:root {
  --ok:    #3aa676;
  --warn:  #d9a23a;
  --err:   #e0574d;
  --info:  #5b8def;
}

/* ---- Z LADDER (invariant: mobile fixed chrome — doctrine D4) ----
   Sheets always cover the tab bar; the FAB never covers a sheet. */
:root {
  --z-tabbar: 250;
  --z-fab:    260;
  --z-sheet:  300;
}