/* ============================================================================
   tokens.css — the single source of visual truth ("Paper & Paprika")
   Spec: _bmad-output/planning-artifacts/website-ux-design-specification.md
   Rules enforced by CI greps:
     - no raw hex/rgb outside this file
     - no off-scale spacing in component CSS
     - no magic motion numbers in JS (JS reads these via getComputedStyle)
   Token discipline: components reference the SEMANTIC tier only.
   Deliberate additions go in the decision log at the bottom of this file.
   ========================================================================== */

/* ---- FONT FACES --------------------------------------------------------
   Self-hosted latin subsets. Fraunces is served pinned at WONK=1, SOFT=0 —
   the wonky cut IS the brand; do not re-request with default axes.
   Fallback metrics tuned so the swap never reflows the hero (zero-CLS swap). */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: fallback; /* preloaded; brief block, never a late mid-read swap */
  font-style: normal;
}
@font-face {
  font-family: "Work Sans";
  src: url("/assets/fonts/worksans-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: fallback; /* preloaded; brief block, never a late mid-read swap */
  font-style: normal;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/spacemono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/spacemono-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Fallbacks with size-adjust so display-size text doesn't jump on swap. */
@font-face {
  font-family: "Fraunces-fallback";
  src: local("Georgia");
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 24%;
}
@font-face {
  font-family: "WorkSans-fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 100.5%;
}

:root {
  /* ---- PRIMITIVES: color ------------------------------------------------
     paper-*: the warm stage. Steps must survive a 30%-brightness LCD —
     if they collapse into one beige, widen them here, not in components. */
  --paper-50: #faf4e8;   /* page background */
  --paper-0: #fffdf7;    /* cards, receipt */
  --paper-100: #f0e6d3;  /* raised surfaces, blog cards */
  --ink-900: #241f1a;    /* text */
  --ink-600: #5d564e;    /* secondary text — 5.6:1 on paper-50 */
  --paprika-500: #d9481c; /* THE DECISION ONLY: swipe-yes, CTA, question keyword. Large text/UI only (3.7:1) */
  --paprika-700: #b23a14; /* small accent text — 4.5:1+ on paper-50 */
  --herb-600: #3e6f4b;   /* positive states ("yes chef") — display sizes only on cream */
  --honey-400: #f3b71f;  /* play energy during swiping/celebration ONLY — display sizes only */

  /* ---- SEMANTIC TIER (components reference ONLY these) ------------------ */
  --color-bg: var(--paper-50);
  --color-surface: var(--paper-0);
  --color-surface-raised: var(--paper-100);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-600);
  --color-accent: var(--paprika-500);
  --color-accent-text: var(--paprika-700);
  --color-positive: var(--herb-600);
  --color-energy: var(--honey-400);
  --color-cta-bg: var(--paprika-500);
  --color-cta-text: var(--paper-50);
  --color-focus: var(--ink-900);
  /* Warm scrim for bio overlays on photos — ink, never neutral black */
  --color-scrim: rgb(36 31 26 / 0.78);

  /* ---- TYPE -------------------------------------------------------------
     Display = Fraunces (wonky); body/UI/recipe steps = Work Sans;
     Space Mono is CAGED inside receipt-framed components. */
  --font-display: "Fraunces", "Fraunces-fallback", georgia, serif;
  --font-text: "Work Sans", "WorkSans-fallback", -apple-system, sans-serif;
  --font-data: "Space Mono", ui-monospace, monospace;

  --text-display: clamp(2.2rem, 3.2vw + 0.9rem, 3.75rem); /* ceiling tuned: the question wraps as two lines beside the deck, never a word-per-line column */
  --text-h2: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);
  --text-h3: 1.25rem;
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-mono: 0.8125rem;
  --text-cta: 1.25rem;          /* CTA text: large+bold => AA at 3:1 on paprika */
  --text-reading: 1.125rem;     /* blog long-form */
  --text-recipe-step: 1.25rem;  /* glance-read at arm's length, flour on thumb */

  --leading-tight: 1.05;
  --leading-body: 1.6;
  --leading-reading: 1.7;

  /* ---- SPACE (4px scale — off-scale values are a CI failure) ------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* card padding, never inline gaps */
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;   /* section rhythm, mobile */
  --space-8: 64px;
  --space-9: 96px;   /* section rhythm, desktop */

  /* ---- LAYOUT ------------------------------------------------------------ */
  --container-max: 1100px;
  --measure-reading: 68ch;
  --bp-mark: 540px;       /* wordmark crops to the mark below this — full brand + 4 nav links need ~470px */
  --bp-deck-side: 720px;  /* hero goes diagonal; like/skip move beside deck */
  --radius-card: 18px;
  --radius-pill: 999px;
  --receipt-max: 320px;
  --grid-card-min: 280px;
  --card-w: 300px;          /* demo card width */
  --card-h: 375px;          /* 4:5 of --card-w */
  --peek-visible: clamp(13.75rem, 24svh, 15rem); /* fold-visible card; ceiling keeps the crop ABOVE the bio */
  --qr-size: 128px;
  --qr-blur: 6px;       /* Polaroid Develop ghost */    /* hero shows this much card above the fold — crops ABOVE the bio */
  --underline-offset: 3px;
  --underline-thickness: 1.5px;

  /* ---- DEPTH (one light source; offset opposes tilt) --------------------- */
  --shadow-resting: 0 2px 8px rgb(36 31 26 / 0.10);
  --shadow-lifted: 8px 14px 30px rgb(36 31 26 / 0.16);
  --shadow-flying: 14px 24px 50px rgb(36 31 26 / 0.22);

  /* ---- KINETIC GESTURE SYSTEM --------------------------------------------
     The swipe is the brand's one graphic gesture. Poses are CSS classes;
     the demo JS reads these tokens via getComputedStyle — never duplicates. */
  --tilt-rest: 0deg;
  --tilt-lifted: -2deg;
  --tilt-flying: 8deg;
  --motion-duration-snap: 200ms;   /* snap-back after a cancelled drag */
  --motion-duration-fly: 300ms;    /* committed swipe exit */
  --motion-duration-reveal: 400ms; /* the exhale — deliberately slower */
  --motion-duration-settle: 600ms; /* peek card settle-on-load vector */
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-snap: cubic-bezier(0.34, 1.4, 0.64, 1);
  --gesture-commit-fraction: 0.35; /* of card width — read by demo JS */
  --gesture-direction-lock-px: 10; /* |dx|>|dy| within this claims the swipe */

  /* ---- FOCUS -------------------------------------------------------------
     Exempt from the paprika ration: keyboard focus is visitor-response. */
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;
}

/* Desktop (>= --bp-deck-side): the deck earns real presence — E1 says 60%
   of this site's traffic is desktop; the demo is not a shrunken phone. */
@media (min-width: 720px) {
  :root {
    --card-w: 340px;
    --card-h: 425px;
  }
}

/* ---- CANDLELIGHT STUB ----------------------------------------------------
   The only sanctioned dark variant — warm espresso, food glows like a lit
   oven window. Built ONLY if the dark-cohort data shows cost (Evidence gate).
   prefers-color-scheme is deliberately NOT auto-applied (spec: D-theme). */
[data-theme="candlelight"] {
  /* values intentionally unset at launch */
}

/* ---- REDUCED MOTION: the token-level kill switch --------------------------
   Durations to near-zero; the crossfade variant keeps the personality. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-snap: 1ms;
    --motion-duration-fly: 1ms;
    --motion-duration-reveal: 1ms;
    --motion-duration-settle: 1ms;
    --tilt-rest: 0deg;
    --tilt-lifted: 0deg;
    --tilt-flying: 0deg;
  }
}

/* ---- DECISION LOG ----------------------------------------------------------
   2026-06-11  initial token set from the UX spec's Visual Design Foundation.
   2026-06-11  --card-w/-h, --peek-visible: D5 peek geometry.
   2026-06-12  --peek-visible scales with svh (tall phones get more food, not more beige).
   2026-06-12  --bp-mark 420->540: real devices in the 421-540 band wrapped the nav CTA.
   2026-06-11  desktop card/display scale-up: E1 (60% desktop) demands a designed desktop, not an adapted mobile.
   2026-06-11  --grid-card-min: index grid column floor.
   2026-06-11  --text-cta @700: paper-on-paprika passes AA as large/bold text (axe).
   (append: date, token, why — one line each)
   ========================================================================== */