/* ==========================================================================
   Expound — design tokens (third-edition brand, 2026-07)
   Reference layer: raw values, used only inside this file.
   Semantic layer: what site.css consumes. No raw hex outside this file.
   Canonical source: ios/Expound/Theme/Theme.swift + brand/brand/brand-guide.html
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---- reference ------------------------------------------------------ */
  --ref-white: #FFFFFF;
  --ref-black: #000000;
  --ref-ink-900: #1C1C1E;      /* text primary light / bezel */
  --ref-ink-950: #0D0D0C;      /* dark reading surface */
  --ref-ink-card: #1C1C1B;
  --ref-ink-warm: #1A1A14;     /* mark fill on light, per brand guide */
  --ref-paper: #F2F2F0;
  --ref-gray-100: #F2F2F6;
  --ref-gray-500: #6D6D72;
  --ref-gray-400: #98989D;
  --ref-warmgray-300: #A1A19C;
  --ref-warmgray-600: #6E6E6A;
  --ref-azure-700: #1E5A99;
  --ref-azure-300: #7CB0E8;
  --ref-charcoal-btn: #3C3C32;
  --ref-gold-print: #B0925A;
  --ref-gold: #C4A86A;
  --ref-red-600: #D70015;
  --ref-red-300: #FF6E62;

  /* ---- semantic: color (light) ---------------------------------------- */
  --bg: var(--ref-white);
  --bg-grouped: var(--ref-gray-100);
  --card: var(--ref-white);
  --bg-inverse: var(--ref-ink-950);        /* the philosophy band */
  --text-inverse: var(--ref-paper);
  --text-inverse-2: var(--ref-warmgray-300);
  --text: var(--ref-ink-900);
  --text-2: var(--ref-gray-500);
  --text-3: var(--ref-gray-400);
  --accent: var(--ref-azure-700);
  --error: var(--ref-red-600);
  --btn-grad-a: var(--ref-charcoal-btn);
  --btn-grad-b: var(--ref-ink-900);
  --btn-text: var(--ref-white);
  --gold-mark: var(--ref-gold);            /* gold-on-ink: dark band only */
  --accent-on-dark: var(--ref-azure-300);  /* accent for photo/ink surfaces, both modes */
  --device-bezel: var(--ref-ink-900);
  --device-ring: rgba(255, 255, 255, 0.12);
  --btn-on-photo-a: var(--ref-white);      /* inverted button for dark photo surfaces */
  --btn-on-photo-b: var(--ref-paper);
  --btn-on-photo-text: var(--ref-ink-950);
  --mark: var(--ref-ink-warm);
  --hairline: rgba(0, 0, 0, 0.10);
  --hairline-strong: rgba(0, 0, 0, 0.12);
  --scrim: rgba(13, 13, 12, 0.62);
  --scrim-soft: rgba(13, 13, 12, 0.40);
  --daylight: var(--ref-white);            /* the dawn's destination, both schemes */
  --daylight-text: var(--ref-ink-900);
  --shadow-card: 0 1px 2px rgba(28, 28, 30, 0.04), 0 8px 24px rgba(28, 28, 30, 0.06);
  --shadow-device: 0 2px 6px rgba(28, 28, 30, 0.08), 0 24px 60px rgba(28, 28, 30, 0.22);
  --nav-veil: rgba(255, 255, 255, 0.72);

  /* ---- space / shape --------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* ---- type ------------------------------------------------------------ */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  --font-scripture: "Literata", Georgia, "Times New Roman", serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", monospace;

  /* Scale: sqrt(phi) ~ 1.272 from a 17px body */
  --step--2: 0.6875rem;   /* 11 — mono eyebrows, badges */
  --step--1: 0.8125rem;   /* 13 — captions, legal small print */
  --step-0: 1.0625rem;    /* 17 — body */
  --step-1: 1.375rem;     /* 22 — lede */
  --step-2: 1.75rem;      /* 28 — h3 */
  --step-3: 2.1875rem;    /* 35 — h2 floor */
  --step-4: 2.8125rem;    /* 45 — h2 ceiling */
  --step-5: 3.5625rem;    /* 57 — h1 floor */
  --step-6: 4.5rem;       /* 72 — h1 ceiling */
  --fluid-h1: clamp(var(--step-5), 2.4rem + 4.6vw, var(--step-6));
  --fluid-h2: clamp(var(--step-3), 1.75rem + 1.9vw, var(--step-4));
  --fluid-h3: clamp(1.375rem, 1.2rem + 0.8vw, var(--step-2));

  /* ---- motion ----------------------------------------------------------- */
  --ease-page: cubic-bezier(0.22, 0.61, 0.21, 1);
  --dur-reveal: 600ms;
  --stagger: 70ms;

  /* ---- layout ------------------------------------------------------------ */
  --container: 1080px;
  --content-col: 680px;
  --pad-inline: clamp(20px, 5vw, 48px);
  --section-pad: clamp(72px, 12vw, 140px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ref-ink-950);
    --bg-grouped: var(--ref-black);
    --card: var(--ref-ink-card);
    --bg-inverse: var(--ref-black);
    --text: var(--ref-paper);
    --text-2: var(--ref-warmgray-300);
    --text-3: var(--ref-warmgray-600);
    --accent: var(--ref-azure-300);
    --error: var(--ref-red-300);
    --btn-grad-a: var(--ref-white);
    --btn-grad-b: var(--ref-paper);
    --btn-text: var(--ref-ink-950);
    --mark: var(--ref-white);
    --hairline: rgba(255, 255, 255, 0.10);
    --hairline-strong: rgba(255, 255, 255, 0.14);
    --scrim: rgba(0, 0, 0, 0.66);
    --scrim-soft: rgba(0, 0, 0, 0.45);
    --shadow-card: none;
    --shadow-device: 0 24px 60px rgba(0, 0, 0, 0.55);
    --nav-veil: rgba(13, 13, 12, 0.72);
  }
}

/* ---- daylight scope ------------------------------------------------------
   Sections below the story live in daylight in BOTH color schemes: the dawn
   resolves once, and the page stays lit until the philosophy interlude
   (which stays dark in both), then returns to daylight through the final
   CTA and footer. Re-points the semantic layer locally; scheme-aware chrome
   (nav, dialog, hero, story) is unaffected. */
/* The philosophy band is the page's one dark interlude after the dawn,
   identical in both schemes. */
.nightfall {
  color-scheme: dark;
  --bg-inverse: var(--ref-ink-950);
  --text-inverse: var(--ref-paper);
  --text-inverse-2: var(--ref-warmgray-300);
}

/* The token remap is shared with .nav-daylight: the fixed bar floats over the
   daylight sections but is not inside them, so without this it keeps the root
   tokens and renders as smoked glass with white text on a white surface in
   dark mode. It takes the tokens only; the surface properties below are
   .daylight's alone, or the bar would go opaque. */
.daylight, .nav-daylight {
  color-scheme: light;
  --bg: var(--daylight);
  --bg-grouped: var(--ref-gray-100);
  --card: var(--ref-white);
  --text: var(--daylight-text);
  --text-2: var(--ref-gray-500);
  --text-3: var(--ref-gray-400);
  --accent: var(--ref-azure-700);
  --error: var(--ref-red-600);
  --btn-grad-a: var(--ref-charcoal-btn);
  --btn-grad-b: var(--ref-ink-900);
  --btn-text: var(--ref-white);
  --mark: var(--ref-ink-warm);
  --hairline: rgba(0, 0, 0, 0.10);
  --hairline-strong: rgba(0, 0, 0, 0.12);
  --shadow-card: 0 1px 2px rgba(28, 28, 30, 0.04), 0 8px 24px rgba(28, 28, 30, 0.06);
  --shadow-device: 0 2px 6px rgba(28, 28, 30, 0.08), 0 24px 60px rgba(28, 28, 30, 0.22);
  --nav-veil: rgba(255, 255, 255, 0.72);
}

.daylight {
  background: var(--bg);
  color: var(--text);
}