/* ==========================================================================
   tokens.css — the design brief, compiled.
   Chaambis, Logan UT — Algerian bakery.
   Source: runs/chaambis-logan-ut/brief.md (APPROVED, C3 2026-09-19). Every
   value below is stated there or is a Builder-execution value within a
   token the brief left unitemised (noted inline where that's the case).
   THIS FILE IS THE ONLY PLACE RAW VALUES LIVE (house-tech-spec §3).
   ========================================================================== */

:root {

  /* --- Colour — brief §2, §2a. One deliberate mode: light. -----------------
     Derivation per design-rules §6: no real-world brand colour exists (logo
     is monochrome; the Wix template's terracotta accent is not a verified
     asset — brief §2 step 1). Palette instead derives from two independently
     corroborated dossier signals (§4.5's GMB product photo + a reviewer's
     unprompted "cute" packaging comment) — family-norms step, argued. */

  --scheme: light;

  --color-bg: #FBF6F1;                 /* warm ivory — page ground */
  --color-surface: #F1E6DD;            /* deeper ivory — cards, catalogue rows, form fields */
  --color-ink: #3E2A38;                /* plum-espresso — body + heading text; no real-world colour exists, derived per brief §2 step 3 */
  --color-ink-muted: #6E5560;          /* secondary text, captions */
  --color-accent: #C98A94;             /* dusty blush-rose — ornament + the one reversed panel's text only, NEVER text on the light ground (brief §2) */
  --color-accent-ink: #FFFFFF;         /* required role; unused as a fill on this site — accent never carries a solid background (brief §2a) */

  /* The thin gold rule — ornament only, never text, at any size (brief §2). */
  --color-gold-line: #B99A55;

  /* The site's actual button/skip-link pairing — the brief's own ink/bg pair
     reused as named roles, not a new colour (brief §2's contrast table row
     "--color-bg on --color-ink", 12.28:1). */
  --color-cta-fill: var(--color-ink);
  --color-cta-text: var(--color-bg);

  /* The ONE reversed-ground panel on the page — "In Their Words" (brief §2a).
     No other panel, card or text block anywhere is reversed-ground. */
  --color-panel-reversed-bg: var(--color-ink);
  --color-panel-reversed-text: var(--color-bg);
  --color-panel-reversed-accent: var(--color-accent);   /* the ONLY place --color-accent ever carries text, 4.74:1 (brief §2a) */

  /* House-required structural colours. */
  --color-border: #E7DBCE;             /* DECORATIVE hairlines only — no contrast floor */
  --color-border-strong: var(--color-ink-muted);   /* a control's own boundary, WCAG 1.4.11 — reuses the already-validated 6.25:1/5.46:1 pair rather than inventing one */

  --color-focus: var(--color-ink);     /* :focus-visible ring — 12.28:1 vs bg, 10.74:1 vs surface */

  /* Dark-band-safe focus ring — REQUIRED: "In Their Words" is a full-bleed
     dark band (brief §2a). --color-bg is that panel's own body-text colour
     against --color-ink, already validated at 12.28:1 (brief §2) — reused
     here rather than inventing a new pairing, scoped to the band only. */
  --color-focus-on-band: var(--color-bg);

  --color-selection-bg: var(--color-ink);
  --color-selection-ink: var(--color-bg);


  /* --- Typography — brief §3. Two families, four woff2 (the §5 ceiling).
     Marcellus ships ONE static instance (400 upright) — no italic master
     exists, so no italic is ever applied to --font-display anywhere on this
     site (brief §3's own instruction; the hero's one emphasis word uses
     colour + a gold underline instead, never font-style). Mulish ships 400,
     700 and a true drawn 400 italic. */

  --font-display: 'Marcellus', 'Marcellus Fallback', 'Libre Caslon Text', Georgia, serif;
  --font-body: 'Mulish', 'Mulish Fallback', -apple-system, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 700;
  --font-weight-display: 400;

  /* --- Type scale — brief §3, computed at every breakpoint the brief
     declares (design-rules §5). Fixed tokens state the same number at 375
     and 1440 and mean it. */

  --text-hero: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);        /* 33.7px @375 -> 57.6px @1440 (ceiling, capped at 1292px) */
  --text-h2: clamp(1.3rem, 1.1rem + 0.9vw, 2rem);              /* 21.0px @375 -> 30.6px @1440 (not yet capped, ceiling at 1600px) */
  --text-eyebrow: 0.78rem;                                     /* 12.48px fixed */
  --text-body: 1rem;                                           /* 16px fixed */
  --text-small: 0.875rem;                                      /* 14px fixed */

  /* Builder-derived execution values (brief §3 does not itemise these three;
     same quiet-premium/Marcellus+Mulish family and measure as the sibling
     brief's own analogous tokens, `j-r-sanchez-painting-san-angelo-tx`,
     reused rather than invented — design-rules §5's "system specified across
     its range" is honoured at the same floors/ceilings that pass there). */
  --text-h3: clamp(1.15rem, 1.02rem + 0.6vw, 1.5rem);          /* 18.57px @375 -> 24px @1440 (ceiling) — header brand, sub-headings */
  --text-lead: clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem);        /* 17.08px @375 -> 19.2px @1440 (ceiling) — hero subhead, section intros */
  --text-index-num: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);      /* 28.3px @375 -> 40px @1440 (ceiling) — The Proofing Room's numeral column */

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;             /* eyebrows / small caps */


  /* --- Space — house scale, unchanged. ------------------------------------ */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* The ONE token setting space between sections (design-rules §7.1). The
     brief's §9 rationale argues restraint over noise twice (the boutique
     pricing, the quiet-premium register) but does not itemise this token
     directly; --space-2xl is the same step the sibling brief in this exact
     family/font pair/ref pair chose on the identical argument
     ("restraint, whitespace, refined serif, muted") — reused rather than a
     fresh choice. Fixed, not fluid, at every breakpoint: 96px always. */
  --section-gap: var(--space-2xl);


  /* --- Layout — house defaults; the brief argues no override. ------------- */

  --layout-container: 72rem;
  --layout-measure: 62ch;
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;

  /* Hero field ratio (brief §6 slot 1: "4:5 portrait-leaning crop"), matching
     the generated asset (4:5) as originally shipped. QA r1 FIX
     (clarity/dissonance): an exact ratio match leaves `object-fit: cover`
     nothing to crop, so the visible slice was just the frame's own top —
     backdrop, not the §6.1 anchor pastry. Per the Critic's remedy
     (object-position + a shorter field at wide viewports, where rule 4's
     375-only arithmetic doesn't bind), the base ratio moves modestly off
     4:5 so object-position has overflow to spend, and a shorter ratio
     applies at wide viewports for the larger correction 1440 needed. */
  --hero-field-ratio: 1 / 1;
  --hero-field-ratio-wide: 8 / 5;

  /* The gold head-rule (brief §3's "one repeated ornament"): a 72%-width,
     2px line, centred (equivalent to the brief's stated left:14%/right:14%
     inset on its own container). Height never scales. Below a 67px
     container (never reached at any supported width) it would switch to a
     fixed centred 48px line — stated per brief §3 for completeness; no
     layout on this site reaches it. */
  --gold-rule-width: 72%;
  --gold-rule-height: 2px;
  --gold-rule-min: 48px;

  /* The Proofing Room's numeral column (same repeated-ornament-minimum
     pattern as the sibling brief's Index of Care: 56px at >=48em, collapsing
     to a stacked single column below that — Builder execution, not itemised
     by the brief's token table). */
  --index-num-col: 3.5rem;             /* 56px, >=48em */

  /* Curated Catalogue Highlight's two supporting thumbnails (Griwech,
     Makroud) — Builder-derived execution size, not itemised in the brief's
     token table, matching the sibling brief's analogous services-row image. */
  --catalogue-img-size: 4.5rem;        /* 72px square */


  /* --- Radius / shadow / border — house defaults; brief argues no override,
     consistent with quiet-premium's restraint (no card grid, no drop-shadow
     device anywhere on this site). --------------------------------------- */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(62 42 56 / 0.06);
  --shadow-md: 0 6px 24px rgb(62 42 56 / 0.09);
  --shadow-lg: 0 24px 60px rgb(62 42 56 / 0.14);

  --border-hairline: 1px;
  --border-thick: 3px;
  --border-style: solid;


  /* --- Motion — brief §7. House architecture tokens driving the standard
     IntersectionObserver reveal on every below-the-fold section. ---------- */

  --duration-fast: 140ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --reveal-shift: 1.25rem;
  --reveal-stagger: 90ms;

  /* The one signature move, "the gold line settles" (brief §7, hero-only,
     ambient on load). No two share a timing origin or duration. */
  --duration-gold-draw: 1.4s;               /* one-shot, cubic-bezier(.2,.8,.2,1) below */
  --ease-gold-draw: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-sweep: 6.8s;                   /* the hero macro's continuous soft light-sweep loop */
  --duration-mote-1: 7.6s;
  --duration-mote-2: 8.9s;
  --mote-2-delay: 1.6s;                     /* offsets mote 2 from mote 1, non-synchronised */

  /* --- Z layers ----------------------------------------------------------- */
  --z-base: 0;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

/* --------------------------------------------------------------------------
   @font-face — brief §3. Four files, two families, SIL OFL 1.1, self-hosted,
   Google Fonts, subset to the house declared safe range (house-tech-spec §8).
   Marcellus ships exactly one static instance (400 upright) — no italic
   master exists, so no italic is ever set on --font-display anywhere on this
   site. Mulish ships 400, 700 and a true drawn 400 italic (the pull-quote's
   own face, brief §3).

   Metrics-matched fallbacks: the SAME font files as
   `j-r-sanchez-painting-san-angelo-tx` (identical woff2 bytes, copied
   directly rather than re-fetched/re-subset — same faces, same weights, same
   licence), so its already-measured fallback numbers
   (`scripts/font-metrics.mjs`, Marcellus against Gelasio — Google Fonts' own
   metric-compatible open substitute for Georgia — and Mulish against
   Liberation Sans / Liberation Sans Bold) apply unchanged; nothing here was
   re-measured because nothing about the bytes changed.

   TWO Mulish Fallback declarations, not one — this hero puts a 700-weight
   primary CTA and a 700-weight eyebrow directly ABOVE the hero field (house
   order, brief §5), so the width delta between a browser's synthetic bold of
   the regular fallback and the real drawn Mulish 700 glyphs is enough to
   move the field. A second `font-weight: 700` fallback face, measured
   against Liberation Sans Bold rather than reusing the 400 cut's numbers,
   removes the mismatch at its source instead of racing the network for it. */

@font-face {
  font-family: 'Marcellus Fallback';
  src: local('Georgia');
  size-adjust: 103.85%;
  ascent-override: 93.8%;
  descent-override: 26.94%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Mulish Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 400;
  size-adjust: 104.47%;
  ascent-override: 96.2%;
  descent-override: 23.93%;
  line-gap-override: 0%;
}

/* The 700 cut — measured against Liberation Sans Bold, not the 400 numbers
   above. Carries the hero's primary CTA and eyebrow, both above the field. */
@font-face {
  font-family: 'Mulish Fallback';
  src: local('Arial Bold'), local('Liberation Sans Bold');
  font-weight: 700;
  size-adjust: 100.26%;
  ascent-override: 100.24%;
  descent-override: 24.93%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Marcellus';
  src: url('../assets/fonts/marcellus-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7,
    U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033;
}

@font-face {
  font-family: 'Mulish';
  src: url('../assets/fonts/mulish-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7,
    U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033;
}

@font-face {
  font-family: 'Mulish';
  src: url('../assets/fonts/mulish-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7,
    U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033;
}

@font-face {
  font-family: 'Mulish';
  src: url('../assets/fonts/mulish-400italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7,
    U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033;
}