/* ============================================================================
   tokens.css — design tokens for Wedding Editorials
   Single source of truth for every locked spec decision in CLAUDE.md.
   No styling rules here — only CSS custom property declarations.
   Line refs (e.g. L113) point back to CLAUDE.md.
   ============================================================================ */

:root {
  /* ---------- Colors — Palette A "Ink & Mist" (L113–120) ---------- */
  --color-bg:              #FAFAFA;
  --color-surface:         #F2F2F2;
  --color-text:            #1A1A1A;
  --color-text-secondary:  #888888;
  --color-text-tertiary:   #AAAAAA;
  --color-nav:             #111111;

  /* ---------- Typography — families ----------
     Verified against the Adobe Fonts kit at use.typekit.net/eau0uws.css.
     Body now uses NHG Display Pro (300 Light) instead of NHG Text Pro because
     Text Pro doesn't ship Light in this kit and the editorial direction calls
     for a single thinner-bodied face across the whole site. --font-text is
     kept as an alias pointing to the same Display stack so existing class
     references (.portfolio-card-names, .journal-card-names) stay consistent. */
  --font-display: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:    "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---------- Typography — weights (standard kit mapping after full-family load) ----------
     Kit carries the full NHG Display Pro family (100–700) plus NHG Text Pro
     Roman/Bold (no Text Pro Light in this kit). Standard numeric mapping —
     verify by re-fetching use.typekit.net/eau0uws.css if the kit changes. */
  --font-weight-extralight: 200;  /* NHG Display Pro 25 — italic display (hero brand statement) */
  --font-weight-light:      300;  /* NHG Display Pro 35 — section headlines, body, labels, nav, CTAs */
  --font-weight-roman:      400;  /* NHG Display Pro 55 — heading backstop, available if needed */
  --font-weight-body:       300;  /* Body weight token — points at Light (300) for the thin-body direction */

  /* ---------- Typography — sizes ----------
     clamp(min, preferred-vw, max) ramps fluidly between mobile and desktop.
     Reduced scale (~50% smaller than the original spec) — the editorial feel
     comes from whitespace and small editorial labels, not type size. Bigger
     headlines read as generic "Helvetica large" rather than premium editorial. */
  --size-display:          clamp(40px, 6vw,  72px);
  --size-section-headline: clamp(28px, 4vw,  56px);
  --size-medium-headline:  clamp(24px, 3vw,  40px);
  --size-body:             16px;
  --size-label:            13px;
  --size-section-label:    11px;  /* small em-dash editorial labels above sections */

  /* ---------- Typography — tracking ---------- */
  --tracking-labels:        0.12em;  /* nav, footer-meta, CTAs, venue strip */
  --tracking-section-label: 0.22em;  /* the editorial em-dash labels — wider tracking for magazine feel */

  /* ---------- Spacing — sections (L88–91) ---------- */
  --space-section:           clamp(80px, 12vw, 160px);
  --space-headline-to-body:  clamp(24px,  4vw,  48px);
  --space-body-to-cta:       clamp(40px,  6vw,  80px);

  /* ---------- Spacing — between photos in a work-story sequence ----------
     Vertical breathing room between consecutive photos on /work/ pages, which
     (unlike the homepage) stack many images with no padded text section
     between them. Smaller than --space-section so the gallery reads as one
     movement, not a series of isolated sections. Tune here in one place. */
  --space-photo:             clamp(40px,  5vw,  88px);

  /* ---------- Spacing — prose (L166–167) ---------- */
  --space-paragraph: 1.5em;

  /* ---------- Spacing — inset images, two-width system (L172–178) ---------- */
  --inset-margin-default:   20%;  /* default inset = 60% wide */
  --inset-margin-statement: 25%;  /* statement inset = 50% wide */

  /* ---------- Layout widths (L146–153) ---------- */
  --layout-max-width:        1280px;
  --layout-padding-desktop:   120px;
  --layout-padding-mobile:     24px;
  --prose-max-width:          600px;

  /* ---------- Logo sizes (L188 + L221) ---------- */
  --logo-nav-height:               56px;
  --logo-footer-height-desktop:    64px;
  --logo-footer-height-mobile:     48px;

  /* ---------- Motion (L921 + L931, L937) ----------
     fade-up duration is 400ms (deliberate, editorial-quiet);
     hover duration is 200ms (per interaction spec). */
  --motion-fade-distance:   20px;
  --motion-duration-scroll: 400ms;
  --motion-duration-hover:  200ms;
  --motion-easing:          ease;

  /* ---------- Focus states (L1218–1220) ---------- */
  --focus-outline-color:  #1A1A1A;
  --focus-outline-offset:    4px;
}