/* ================================================================
   STORY Magazine G2 — Design Tokens
   Phase 2 Foundation
   Provenance: Every token has a SOURCE comment.
   Canonical tokens use --{category}-{name}.
   Backward-compatible aliases use --story-{name}.
   ================================================================= */

/* ----------------------------------------------------------------
   COLOUR
   Source: COLOUR-SYSTEM.md, DESIGN-TOKENS.md
   Decision: C-3 — Adopt EE72 black/white system
   ---------------------------------------------------------------- */
:root {
  /* Base colours */
  --color-black: #000000;
  /* SOURCE: COLOUR-SYSTEM.md §Primary Colours. EE72 measured: rgb(0,0,0). */

  --color-white: #ffffff;
  /* SOURCE: COLOUR-SYSTEM.md §Primary Colours. EE72 measured: rgb(255,255,255). */

  /* Semantic colours */
  --color-error: #e85c41;
  /* SOURCE: COLOUR-SYSTEM.md §Semantic Colours. EE72 measured: rgb(232,92,65).
     NOTE: DESIGN-TOKENS.md lists --color-error as #ff3d3d.
     COLOUR-SYSTEM.md and FONT-FORENSICS.md both specify #e85c41.
     Using the more specific measured value. */

  --color-dark-brown: #512200;
  /* SOURCE: COLOUR-SYSTEM.md §Semantic Colours. EE72 measured: rgb(81,34,0). */

  --color-gray-text: #333333;
  /* SOURCE: COLOUR-SYSTEM.md §Semantic Colours. EE72 measured: rgb(51,51,51). */

  --color-border-gray: #abb0b2;
  /* SOURCE: COLOUR-SYSTEM.md §Semantic Colours. EE72 measured: rgb(171,176,178). */

  /* Contextual tokens */
  --color-bg: var(--color-white);
  --color-text: var(--color-black);
  --color-text-secondary: var(--color-gray-text);
  --color-text-inverted: var(--color-white);
  --color-border: var(--color-black);
  --color-border-subtle: var(--color-border-gray);
  --color-panel-dark: var(--color-black);
  --color-panel-light: var(--color-white);
  --color-muted: var(--color-gray-text);

  /* Backward-compatible aliases */
  --story-ink: var(--color-text);
  /* WAS: #11110f. NOW: #000 per C-3. */

  --story-paper: var(--color-bg);
  /* WAS: #f7f5ef. NOW: #fff per C-3. */

  --story-white: var(--color-white);
  --story-muted: var(--color-muted);
  /* WAS: #68665f. NOW: #333 per C-3. */

  --story-line: var(--color-border-subtle);
  /* WAS: #d8d5cc. NOW: #abb0b2 per C-3. */

  --story-soft: #ebe7dc;
  /* SOURCE: STORY-specific. No EE72 equivalent.
     STORY IMPLEMENTATION DECISION.
     Used for continuation-panel backgrounds.
     Preserved as STORY brand warmth where editorially appropriate. */
}

/* ----------------------------------------------------------------
   TYPOGRAPHY
   Source: TYPOGRAPHY-SYSTEM.md, FONT-FORENSICS.md
   Decision: C-2 — Use measured EE72 values
   ---------------------------------------------------------------- */
:root {
  /* Font families */
  --font-sans: "Graphik Web", sans-serif;
  /* SOURCE: TYPOGRAPHY-SYSTEM.md §Primary Font. */

  --font-secondary: "Spezia", sans-serif;
  /* SOURCE: TYPOGRAPHY-SYSTEM.md §Secondary Font.
     Decision: C-7 — Load only where required.
     Currently no STORY component requires Spezia.
     Token reserved for future use. Do not load font files yet. */

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  /* SOURCE: TYPOGRAPHY-SYSTEM.md §Loaded Weights. */

  /* Text sizes */
  --text-base: 1rem;
  /* 16px. SOURCE: TYPOGRAPHY-SYSTEM.md §Body Default. */

  --text-base--line-height: 1.5;
  /* SOURCE: TYPOGRAPHY-SYSTEM.md §Body Default. */

  --text-sm: 0.875rem;
  /* 14px. SOURCE: TYPOGRAPHY-SYSTEM.md §Body Small. */

  --text-sm--line-height: calc(1.25 / 0.875);
  /* SOURCE: DESIGN-TOKENS.md §Text Sizes. */

  /* Article hero — LOCKED per ARTICLE HERO FONT decision */
  --font-article-hero-family: var(--font-sans);
  --font-article-hero-weight: var(--font-weight-light);
  /* 300. SOURCE: FONT-FORENSICS.md "Article Headline" row.
     Measured: Graphik Web / 300 / 32px / 36px / normal / rgb(255,255,255). */

  --font-article-hero-size: 32px;
  --font-article-hero-leading: 36px;
  --font-article-hero-tracking: normal;
  /* NOTE: Figma 1440 authored frame specifies 47.6/48.
     Figma wins at 1440; this token is the runtime/base value.
     Phase 5 article shell will apply Figma values at appropriate breakpoints. */

  /* Story title (paired rows) */
  --font-story-title-size: 18px;
  --font-story-title-weight: var(--font-weight-medium);
  /* 500. SOURCE: 07-TYPOGRAPHY.md "Story title" row. */

  --font-story-title-leading: 22px;
  --font-story-title-transform: uppercase;

  /* Deck / byline */
  --font-deck-size: 14px;
  --font-deck-weight: var(--font-weight-normal);
  /* 400. SOURCE: 07-TYPOGRAPHY.md "Deck/byline" row. */

  --font-deck-leading: 16px;
  --font-deck-transform: uppercase;

  /* Body */
  --font-body-size: var(--text-base);
  --font-body-weight: var(--font-weight-normal);
  /* 400 = Body Default. SOURCE: TYPOGRAPHY-SYSTEM.md.
     Article reading blocks may override to 300 (Body Light). */

  --font-body-leading: var(--text-base--line-height);

  /* Nav link */
  --font-nav-size: 14px;
  --font-nav-weight: var(--font-weight-medium);
  /* 500. SOURCE: TYPOGRAPHY-SYSTEM.md "Nav Link Medium" row (14/500/16, uppercase, #000).
     DESIGN-TOKENS.md maps --font-weight-medium to "Buttons, labels, navigation, emphasis".
     STAGING-NAV-DEFECT-003: raise nav weight from 300 → 500 per audit evidence. */

  --font-nav-leading: 16px;
  --font-nav-transform: uppercase;

  /* Card title */
  --font-card-title-size: 24px;
  --font-card-title-weight: var(--font-weight-light);
  /* 300. SOURCE: TYPOGRAPHY-SYSTEM.md "Card Title" row. */

  --font-card-title-leading: 28px;

  /* Card excerpt */
  --font-card-excerpt-size: 14px;
  --font-card-excerpt-weight: var(--font-weight-light);
  /* 300. SOURCE: TYPOGRAPHY-SYSTEM.md "Card Excerpt" row. */

  --font-card-excerpt-leading: 16px;
  --font-card-excerpt-transform: uppercase;

  /* Card meta */
  --font-card-meta-size: 12px;
  --font-card-meta-weight: var(--font-weight-medium);
  /* 500. SOURCE: TYPOGRAPHY-SYSTEM.md "Card Meta" row. */

  --font-card-meta-leading: 16px;
  --font-card-meta-transform: uppercase;

  /* Quote */
  --font-quote-size: 64px;
  --font-quote-weight: var(--font-weight-medium);
  /* 500. SOURCE: TYPOGRAPHY-SYSTEM.md "Quote" row. */

  --font-quote-leading: 64px;

  /* Quote attribution */
  --font-quote-attribution-size: 24px;
  --font-quote-attribution-weight: var(--font-weight-medium);
  /* 500. SOURCE: TYPOGRAPHY-SYSTEM.md "Quote Attribution" row. */

  --font-quote-attribution-leading: 28px;

  /* Backward-compatible alias */
  --story-font: var(--font-sans);
  /* WAS: Graphik,Arial,Helvetica,sans-serif.
     NOW: "Graphik Web", sans-serif per FONT-FACE NORMALIZATION. */
}

/* ----------------------------------------------------------------
   SPACING
   Source: SPACING-SYSTEM.md, GRID-SYSTEM.md
   ---------------------------------------------------------------- */
:root {
  /* Base units */
  --spacing: 0.25rem;
  /* 4px. SOURCE: SPACING-SYSTEM.md §Base Unit. */

  --spacing-0: 0;
  --spacing-sm: 8px;
  --spacing-md: 16px;

  /* Layout spacing */
  --block-gap: 120px;
  /* SOURCE: SPACING-SYSTEM.md §Spacing Tokens. */

  --bounded-gutter: 20px;
  /* SOURCE: SPACING-SYSTEM.md §Spacing Tokens. */

  --bounded-gutter-tablet: 114px;
  /* SOURCE: SPACING-SYSTEM.md §Spacing Tokens. */

  --bounded-gutter-small-desktop: 140px;
  /* SOURCE: SPACING-SYSTEM.md §Spacing Tokens. */

  --breakout-gutter: 200px;
  /* SOURCE: SPACING-SYSTEM.md §Spacing Tokens. */

  --page-margin-mobile: 20px;
  --page-margin-tablet: 35px;
  --page-margin-desktop: 40px;
  /* SOURCE: GRID-SYSTEM.md §Page Margins. */

  --bottom-nav-height-mobile: 64px;
  --bottom-nav-height-tablet: 64px;
  --bottom-nav-height-desktop: 90px;
  /* SOURCE: SPACING-SYSTEM.md §Spacing Tokens.
     NOTE: SPACING-SYSTEM.md lists only mobile (64px) and desktop (90px).
     Tablet value (64px) inferred from FOOTER-SYSTEM.md responsive heights. */

  --nav-link-py: 24px;
  /* SOURCE: SPACING-SYSTEM.md §Spacing Tokens. */

  --nav-link-py-lg: 37px;
  /* SOURCE: SPACING-SYSTEM.md §Spacing Tokens. */

  /* Backward-compatible aliases */
  --story-space-1: var(--spacing);
  --story-space-2: var(--spacing-sm);
  --story-space-3: 12px;
  /* STORY-specific intermediate. No EE72 equivalent. Preserved. */

  --story-space-4: var(--spacing-md);
  --story-space-5: 20px;
  --story-space-6: 24px;
  --story-space-8: 32px;
  --story-space-10: 40px;
  --story-space-12: 48px;
  --story-space-16: 64px;
  --story-space-20: 80px;
  --story-space-24: 96px;
  --story-space-32: 128px;
  --story-space-40: 160px;
  --story-space-48: 192px;

  --story-gutter: var(--bounded-gutter);
  /* WAS: clamp(20px,4vw,64px). NOW: 20px / 114px / 140px per EE72. */

  --story-header: 72.5625px;
  /* Preserved from STORY v1.0.0.
     Will update to 101px at 1280+ via media query below.
     Phase 3 will reconcile header architecture. */

  --story-footer: var(--bottom-nav-height-mobile);
  /* WAS: 79px. NOW: 64px (matches EE72 mobile footer height). */

  --story-bottom-nav: var(--bottom-nav-height-mobile);
  /* WAS: 80px. NOW: 64px (matches EE72 mobile bottom-nav height). */
}

/* ----------------------------------------------------------------
   GRID / CONTAINER
   Source: GRID-SYSTEM.md, 02-ARTICLE.md
   ---------------------------------------------------------------- */
:root {
  --bounded-width: 606px;
  /* SOURCE: GRID-SYSTEM.md §Container System.
     Mobile bounded content max-width. */

  --bounded-width-tablet: 878px;
  /* SOURCE: GRID-SYSTEM.md §Container System.
     Tablet+ bounded content max-width. */

  --breakout-max-width: 1114px;
  /* SOURCE: GRID-SYSTEM.md §Breakout Container. */

  /* Backward-compatible aliases */
  --story-reading: var(--bounded-width);
  /* WAS: 36rem (~576px). NOW: 606px per EE72. */

  --story-reading-tablet: var(--bounded-width-tablet);
  /* WAS: 38rem (~608px). NOW: 878px per EE72. */

  --story-wide: var(--breakout-max-width);
  /* WAS: 74rem (~1184px). NOW: 1114px per EE72. */

  --story-page-max: 100vw;
  /* WAS: 1600px.
     NOW: 100vw per EE72 GRID-SYSTEM.md §Full-Width Container.
     EE72 content meets edge-to-edge; no page max-width. */

  --story-editorial-max: var(--breakout-max-width);
  /* WAS: 82rem (~1312px). NOW: 1114px per EE72. */
}

/* ----------------------------------------------------------------
   Z-INDEX
   Source: GRID-SYSTEM.md §Z-Index Hierarchy
   ---------------------------------------------------------------- */
:root {
  --z-skip-link: 9999;
  /* SOURCE: GRID-SYSTEM.md. */

  --z-cookie-bar: 900;
  /* SOURCE: GRID-SYSTEM.md. */

  --z-loading-screen: 800;
  /* SOURCE: GRID-SYSTEM.md. */

  --z-newsletter-modal: 700;
  /* SOURCE: GRID-SYSTEM.md. */

  --z-mini-cart: 600;
  /* SOURCE: GRID-SYSTEM.md. */

  --z-article-drawer: 500;
  /* SOURCE: GRID-SYSTEM.md. */

  --z-menu: 39;
  /* Preserved from STORY v1.0.0.
     Mobile menu must sit above header and content. */

  --z-bottom-nav: 19;
  /* SOURCE: GRID-SYSTEM.md. */

  --z-footer: 19;
  /* SOURCE: GRID-SYSTEM.md.
     Footer is fixed bottom with same z-index as bottom nav.
     Phase 3 will implement fixed footer. */

  --z-header: 10;
  /* SOURCE: GRID-SYSTEM.md lists Header as auto (static).
     STORY header is currently fixed; z-index required.
     Will reconcile to auto when header becomes static in Phase 3.
     NOTE: Lowered from 40 to prevent header covering open mobile menu (z-menu: 39). */

  /* Backward-compatible aliases */
  --story-z-header: var(--z-header);
  --story-z-menu: var(--z-menu);
  --story-z-bottom: var(--z-bottom-nav);
}

/* ----------------------------------------------------------------
   MOTION
   Source: MOTION-SYSTEM.md, DESIGN-TOKENS.md
   ---------------------------------------------------------------- */
:root {
  --default-transition-duration: .15s;
  /* SOURCE: MOTION-SYSTEM.md §Transition Tokens.
     Default for hero content, mute button. */

  --ease-in: cubic-bezier(.4, 0, 1, 1);
  /* SOURCE: MOTION-SYSTEM.md §Easing Functions. */

  --ease-out: cubic-bezier(0, 0, .2, 1);
  /* SOURCE: MOTION-SYSTEM.md §Easing Functions. */

  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  /* SOURCE: MOTION-SYSTEM.md §Easing Functions. */

  /* Component durations */
  --duration-hero-content: 0.15s;
  --duration-mute-button: 0.15s;
  --duration-table-row: 0.2s;
  --duration-link-opacity: 0.2s;
  --duration-button: 0.3s;
  --duration-group-transition: 0.3s;
  --duration-logo: 0.3s;
  --duration-cookie-details: 0.3s;
  --duration-block-group: 0.3s;
  --duration-newsletter-modal: 0.3s;
  --duration-search-input: 0.3s;
  --duration-search-expand: 0.4s;
  --duration-mini-cart: 0.5s;
  --duration-bottom-nav: 0.5s;
  --duration-article-drawer: 0.5s;
  --duration-article-drawer-description: 0.5s;
  --duration-card-hover: 0.5s;
  --duration-cookie-bar: 0.6s;
  --duration-carousel: 0.5s;
  --duration-carousel-settled: 0.3s;
  --duration-compact-menu: 0.3s;
  /* SOURCE: MOTION-SYSTEM.md §Transition Tokens. */

  /* Backward-compatible aliases */
  --story-fast: var(--default-transition-duration);
  --story-controlled: var(--duration-button);
  --story-editorial: var(--duration-carousel);
  --story-ease: var(--ease-in-out);
}

/* ----------------------------------------------------------------
   MOTION — Phase 9 semantic tokens
   Source: MOTION-SYSTEM.md §Hero, §Article Cards; 09-MOTION.md
   STORY implementation decisions for the scroll-reveal engine.
   ---------------------------------------------------------------- */
:root {
  --duration-reveal: 0.5s;
  /* SOURCE: 09-MOTION.md — homepage content state 0.5s;
     MOTION-SYSTEM.md — card hover 0.5s.
     Single duration shared by the JS-gated scroll-reveal system. */

  --duration-reveal-fast: 0.3s;
  /* SOURCE: MOTION-SYSTEM.md — block groups 0.3s ease-in-out.
     Reserved alias; composer blocks use --duration-block-group. */

  --reveal-distance: 14px;
  /* STORY IMPLEMENTATION DECISION.
     Subtle fade-up travel (0.25rem rhythm). Transform-only, zero CLS. */

  --stagger-step: 60ms;
  /* STORY IMPLEMENTATION DECISION. Sibling-sequence stagger unit. */

  --stagger-cap: 240ms;
  /* STORY IMPLEMENTATION DECISION. Cap = 4 steps; grids finish quickly. */

  --parallax-hero: 20px;
  /* STORY IMPLEMENTATION DECISION.
     Subtle hero-copy drift range.
     MOTION-SYSTEM.md §Hero component: "Content parallax (subtle)".
     §Scroll Behaviour: "Parallax | Subtle (hero content)". */
}

/* ----------------------------------------------------------------
   BREAKPOINTS (documented; not usable in CSS @media variables)
   Source: 10-RESPONSIVE.md, GRID-SYSTEM.md
   ---------------------------------------------------------------- */
/*
   EE72 breakpoint family:
   - 640px  : small-tablet  (pair split, carousel controls)
   - 768px  : tablet portrait (header compact, stacked hero)
   - 1024px : small-desktop (compact header, 2-col archive)
   - 1280px : desktop (full header, archive mode toggle, 4-col)
   - 1920px : large desktop
*/

/* ----------------------------------------------------------------
   RESPONSIVE TOKEN ADJUSTMENTS
   ---------------------------------------------------------------- */

@media (min-width: 400px) {
  :root {
    --story-bottom-nav: 65px;
    /* STORY legacy alias. EE72 does not define a 400px breakpoint.
       Preserved for backward compatibility with existing shell.css. */
  }
}

@media (min-width: 640px) {
  :root {
    --story-footer: var(--bottom-nav-height-tablet);
    --story-bottom-nav: var(--bottom-nav-height-tablet);
  }
}

@media (min-width: 768px) {
  :root {
    --story-gutter: var(--bounded-gutter-tablet);
  }
}

@media (min-width: 1280px) {
  :root {
    --story-header: 101px;
    /* SOURCE: GRID-SYSTEM.md §Responsive Behaviour.
       Desktop header height. */

    --story-footer: var(--bottom-nav-height-desktop);
    --story-bottom-nav: var(--bottom-nav-height-desktop);
    --story-gutter: var(--bounded-gutter-small-desktop);
  }
}