/*
---
name: tokens.css
description: Brand variables — Lorayne's declared mockup (cream / teal / brass, Fraunces + Work Sans).
version: 0.3
date: 2026-07-19
---
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Work+Sans:wght@300;400;500;600&display=swap');

:root {
  /* === Palette, MEASURED from Lorayne's own landing-page design
     (Brand_Mockup_Website.jpg) on 2026-08-10, not eyeballed. A row-by-row
     profile of that image gives four flat bands:
         0.0 - 41.7%   header + hero      #665646   the darker brown
        41.7 - 64.8%   category tiles     (imagery)
        64.8 - 91.3%   values row         #DDD1C3   the page beige
        91.3 -  100%   footer             #665646   the same brown
     plus a teal accent of #316B7F on her buttons and story band.
     Jerry's instruction 2026-08-10: that beige is the background for EVERY
     page, and the top banner is the brown. === */
  --bg:        #DDD1C3;   /* page background — her beige */
  --bg-alt:    #E7DCD3;   /* alt band / card bg — the lighter beige of her option cards */
  --ink:       #1C1A17;   /* primary text */
  --ink-soft:  #59544C;   /* muted text */
  --teal-deep: #24525F;   /* header, buttons, story band — her teal, darkened */
  --teal:      #316B7F;   /* links, accents, underlines — measured from her buttons */
  --teal-bright: #2E8E85; /* hover / bright accent */
  --brass:     #A9834F;   /* botanical / warm metal accent */
  --line:      rgba(28,26,23,0.12);
  --warn:      #A9834F;

  /* === Brand band — the brown field shared by the site header, the landing
     hero and the footer. NO LONGER PROVISIONAL: measured from Lorayne's own
     landing-page design on 2026-08-10, where the header, hero and footer are
     all this one brown. Supersedes the #5A4A3B sampled off the hero photo's
     studio backdrop. Change --band-bg here and every band moves together — do
     not re-introduce a literal in layout.css or components.css. === */
  --band-bg:       #665646;              /* header + hero + footer — measured */
  --band-bg-deep:  #3A2E23;              /* mockup-style footer; button ink on band */
  --band-ink:      #F7F2E9;              /* cream type on the band */
  --band-ink-soft: rgba(247,242,233,0.80);
  --band-gold:     #E3C08A;              /* eyebrow, active underline, headings */
  --band-line:     rgba(247,242,233,0.16);

  /* === Cut-out tile ground — the square behind the piece and variant shots on
     every design page. Jerry 2026-08-13: try a warm neutral BETWEEN the band
     brown and the page beige, replacing the teal trialled on 2026-08-11.
     Reasoning for the value: the tiles hold gold, silver and copper cut-outs, so
     the ground has to sit far enough from gold in VALUE that a warm piece still
     reads. Sitting at the exact midpoint of #665646 and #DDD1C3 (#A29485) is too
     light for that — gold flattens into it. This is roughly a third of the way
     toward the beige and slightly desaturated, which keeps it clearly a brand
     neutral while leaving the metals room. Retune HERE, never in design-page.css.
     Alternates worth trying, darker to lighter: #7B6E60, #8C7E6E, #9A8C7C. === */
  --tile-ground:   #8C7E6E;

  /* === Model-shot height. ONE value for the worn/model photograph wherever it
     leads a page: the landing hero and the design-page leaf hero. Jerry
     2026-08-13 fixed the landing hero's height because it grew with the viewport
     and made the laptop view too tall, liked it, and asked for the same size on
     the design pages -- which had the identical fault in a different unit
     (`max-height: 70vh`, so a tall screen produced a tall hero). Both now read
     this token, so the two stay in step; retune HERE. === */
  --hero-model-h:  360px;

  /* === Legacy aliases (repointed so existing layout/components inherit) === */
  --turquoise:      var(--teal);
  --turquoise-dark: var(--teal-deep);
  --turquoise-pale: var(--bg-alt);
  --mute:  var(--ink-soft);

  /* Aliases used by site code */
  --color-teal:        var(--teal);
  --color-teal-dark:   var(--teal-deep);
  --color-teal-light:  var(--teal-bright);
  --color-black:       var(--ink);
  --color-ink:         var(--ink);
  --color-bone:        var(--bg);
  --color-paper:       #ffffff;
  --color-muted:       var(--ink-soft);
  --color-line:        var(--line);
  --bg-page:           var(--bg);
  --bg-card:           #ffffff;
  --bg-elev:           #ffffff;
  --fg-page:           var(--ink);
  --accent:            var(--teal);

  /* === Typography (mockup: Fraunces display, Work Sans body) === */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Work Sans', system-ui, sans-serif;

  --fs-hero:     clamp(2.2rem, 4vw, 3.4rem);
  --fs-h1:       clamp(1.7rem, 3vw, 2.4rem);
  --fs-h2:       clamp(1.4rem, 2.4vw, 2rem);
  --fs-h3:       1.1rem;
  --fs-body:     1rem;
  --fs-small:    0.85rem;

  --lh-tight: 1.12;
  --lh-body:  1.6;

  /* === Spacing === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 2px;
  --radius:    3px;
  --radius-lg: 8px;

  --container: 1200px;
  --container-narrow: 760px;

  --shadow-soft: 0 2px 14px rgba(14,59,59,0.10);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.05);

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur:  180ms;
}