/* ==========================================================================
   StilledInk — Design Tokens
   "Dark Ink / Quiet Cinema"
   Single source of truth for colour, type, space, radius, shadow, motion.
   ========================================================================== */

:root {
  /* --- Colour: Ink (canvas) ------------------------------------------------ */
  --ink-900: #0B0C0E;   /* page base */
  --ink-850: #0E1013;   /* section base */
  --ink-800: #14171B;   /* raised surface */
  --ink-700: #1C2026;   /* panel / card */
  --ink-600: #272C34;   /* hover surface */

  /* --- Colour: Paper (text + light) --------------------------------------- */
  --paper-50:  #F6F4EF; /* primary headings (warm white) */
  --paper-200: #D8D6D0; /* body text */
  --paper-400: #9A9C9F; /* secondary / captions */
  --paper-600: #5E636B; /* faint meta / disabled */

  /* --- Colour: Accent (single hue — ink-blue) ----------------------------- */
  --accent-700: #2A4A6B;
  --accent-500: #3E6E9E;
  --accent-300: #6FA3CE;
  --accent-glow: rgba(62, 110, 158, 0.16);

  /* --- Colour: Sage (secondary atmospheric hue, pairs with ink-blue) ------ */
  --sage-400: #7E9B86;
  --sage-glow: rgba(126, 155, 134, 0.16);

  /* --- Colour: Ember (warm accent — palette bridge) -----------------------
     Ember is the warmth that defines the hero (LUMEN-style glow + rings +
     particles). It then reappears, sparingly, throughout the ink-blue body
     so the warm hero and the calm body read as one system rather than two
     palettes. Deliberate echoes today:
       - Hero glow + rotating rings + particles  (cosmic.css)
       - Scripture chip                          (components.css .chip--scripture)
       - Trust-point sliding rules                (components.css .trust-point__rule)
       - Faith-aware callout rule + glow         (scenes.css .faith2 .field--ember1)
       - Closing-note tick                       (scenes.css .closing__note::before)
     Rule of thumb: ember is rare. Never lead with it; use it to repeat the
     hero warmth at one or two beats per scene at most. */
  --ember-400: #B98A5E;
  --ember-soft: rgba(185, 138, 94, 0.12);

  /* --- Lines / overlays --------------------------------------------------- */
  --line: rgba(246, 244, 239, 0.08);
  --line-strong: rgba(246, 244, 239, 0.14);
  --scrim: rgba(8, 9, 11, 0.72);

  /* --- Typography families ------------------------------------------------ */
  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* --- Type scale (fluid) ------------------------------------------------- */
  --fs-display: clamp(3rem, 6.2vw, 6rem);
  --fs-h1:      clamp(2.4rem, 4.6vw, 3.9rem);
  --fs-h2:      clamp(1.9rem, 3vw, 2.6rem);
  --fs-h3:      clamp(1.3rem, 1.9vw, 1.65rem);
  --fs-lead:    clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.9375rem;   /* 15px */
  --fs-caption: 0.8125rem;   /* 13px */

  --lh-tight: 1.04;
  --lh-head:  1.14;
  --lh-body:  1.62;

  /* --- Spacing scale (8px base) ------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* Section rhythm + layout widths */
  --section-y: clamp(72px, 11vh, 152px);
  --maxw: 1200px;
  --measure: 64ch;
  --gutter: clamp(20px, 5vw, 48px);

  /* --- Radius ------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-phone: 44px;
  --r-full: 999px;

  /* --- Shadow / glow ------------------------------------------------------ */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 30px 80px rgba(0, 0, 0, 0.55);
  --shadow-hair: inset 0 0 0 1px var(--line);

  /* --- Motion ------------------------------------------------------------- */
  --ease-quiet: cubic-bezier(0.22, 1, 0.36, 1);   /* house curve (expo-out) */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --dur-cine: 1100ms;

  /* Sticky nav height */
  --nav-h: 68px;
}