/* ============================================================================
   GNARLYWHAL — DESIGN TOKENS  (single source of truth)
   Import this file. Reference var(--name). Never re-type a hex.
   Companion: design-canon.md (the human-readable SSOT — read it first).
   Status: WARM art direction LOCKED 2026-06-20 (Alex). Tokens below carry ROLES.
   Type pair (Fraunces/Geist) and core palette hexes verified against the shipped
   :root in website/about.html L16-19 + index.html L23-26. NOT typed from memory.
   ----------------------------------------------------------------------------
   THE ONE RULE THESE TOKENS ENCODE: sand is the dominant ground; navy is an
   ACCENT used in at most ONE section per page. If you find yourself painting a
   second band navy, you broke the canon — use --warm-ground instead.
   ============================================================================ */

:root {

  /* ── CORE PALETTE (locked hexes) ──────────────────────────────────────────
     The five named brand colors. Hexes are LOCKED (master Section 2 + shipped
     :root). What changed 2026-06-20 is their ROLES, not their values. */

  --sand:        #f5f0e8;  /* DOMINANT page ground. Warm off-white coastal.    */
  --deep:        #0d1b2a;  /* "The Deep" navy. ACCENT/anchor ONLY — max 1 band */
  --atlantic:    #1b3a4b;  /* secondary dark, depth layering inside the 1 dark */
  --tusk:        #00c2b8;  /* teal accent, named for the narwhal tusk          */
  --coral:       #e85d3a;  /* warm accent — energy, emphasis, primary CTA      */

  /* ── WARM ROLE EXTENSION (the 2026-06-20 shift made executable) ────────────
     Sand alone is too flat to carry a whole page. These warm neutrals give the
     heritage-coastal "Markham Roberts" layering: cream-on-cream depth, terracotta
     warmth, wood/brass, sage. Use these for grounds and surfaces; reach for navy
     only at the single dark moment. */

  --cream:        #faf6ef;  /* lightest warm — lifted cards/surfaces on sand    */
  --sand-deep:    #ece4d6;  /* a step down from sand — alternate warm band      */
  --linen:        #e8dfcf;  /* warmest neutral band — tactile, paper-like       */
  --terracotta:   #c9694a;  /* antique coral — warmer/earthier than --coral;
                               heritage emphasis, warm rules, eyebrow on light  */
  --clay:         #d98e6a;  /* soft warm tint — chip fills, hover warmth        */
  --wood:         #8a5a3c;  /* warm wood/brass-brown — fine rules, brackets     */
  --brass:        #b08948;  /* metallic warm accent — small marks, dividers     */
  --sage:         #8a9a7b;  /* muted green — quiet secondary accent, balance    */
  --sage-soft:    #cfd6c4;  /* sage tint — soft chip/surface                    */

  /* ── INK / TEXT ROLES ──────────────────────────────────────────────────── */

  --ink:          #0d1b2a;  /* primary text on warm grounds (= deep)            */
  --ink-soft:     #5b6b78;  /* secondary/body text on light (shipped value)     */
  --ink-warm:     #6b5544;  /* warm-brown body text — heritage feel on linen    */
  --on-dark:      #f5f0e8;  /* text on the single dark band (= sand)            */
  --on-dark-soft: rgba(245,240,232,.66); /* muted text on dark (shipped)        */

  /* ── LINES / BORDERS ─────────────────────────────────────────────────────── */

  --line:        #e2dccd;             /* hairline on sand (shipped value)       */
  --line-warm:   #d8cdb8;             /* warmer/deeper rule for editorial frames*/
  --line-dark:   rgba(255,255,255,.12); /* hairline inside the dark band        */

  /* ── HOVER BRIGHTS (shipped) ──────────────────────────────────────────────── */

  --tusk-2:      #00d4c9;
  --coral-2:     #f06a48;
  --deep-2:      #13283a;
  --white:       #fff;

  /* ── SIGNAL / SELECTION ──────────────────────────────────────────────────── */

  --selection-bg: var(--coral);
  --selection-fg: var(--sand);

  /* ── TYPE FAMILIES (locked pair — Fraunces display / Geist body) ──────────── */

  --disp: "Fraunces", Georgia, serif;          /* headlines, the storytelling   */
  --sans: "Geist", -apple-system, sans-serif;  /* body, the precision           */

  /* ── TYPE SCALE — fluid clamp() vars ──────────────────────────────────────
     CONTRAST LAW: the hero display is >= 3x the eyebrow/label size. Never let a
     headline sit at midweight-midsize — real scale jump or it reads template.
     Min / preferred-vw / max are tuned to the shipped scale. */

  --fs-eyebrow:  0.75rem;                          /* 12px — uppercase label     */
  --fs-label:    0.80rem;                          /* small caps / kicker        */
  --fs-body:     1.0625rem;                        /* 17px base body             */
  --fs-lede:     clamp(1.05rem, 1.5vw, 1.3rem);    /* intro paragraph            */
  --fs-h3:       clamp(1.4rem, 2.4vw, 2rem);       /* essence / sub-head         */
  --fs-h2:       clamp(2.4rem, 6vw, 5.2rem);       /* section headline           */
  --fs-h1:       clamp(3rem, 8.4vw, 8rem);         /* hero — the 3x+ moment      */
  --fs-stat:     clamp(2.6rem, 4.4vw, 3.8rem);     /* big proof numbers          */

  /* type rhythm */
  --lh-display:  0.98;     /* tight display line-height                          */
  --lh-hero:     0.93;     /* hero runs tighter                                  */
  --lh-body:     1.65;     /* airy body — the tension against display IS the law */
  --tracking-display: -0.025em;
  --tracking-hero:    -0.045em;
  --tracking-eyebrow:  0.28em;   /* wide uppercase eyebrow tracking              */
  --weight-hero:  900;
  --weight-head:  800;
  --weight-it:    600;     /* italic emphasis sits LIGHTER than the head it cuts */

  /* ── SPACING SCALE (8pt-rooted, named by use) ─────────────────────────────── */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* band vertical rhythm — fluid, matches shipped .band */
  --band-y:   clamp(70px, 9.5vh, 124px);
  /* card / surface inner padding — the "floating" tactile pad */
  --pad-card: clamp(34px, 4.5vw, 60px);
  --gutter:   32px;        /* .wrap side padding                                 */

  /* ── CONTAINER WIDTHS — VARY THE MEASURE (anti-template) ──────────────────
     Never run every section at one width. Three measures, used on purpose. */

  --w-wide:    1240px;   /* default content measure (shipped .wrap)             */
  --w-text:    62ch;     /* intimate reading measure for prose blocks           */
  --w-narrow:  44ch;     /* tight hero-copy / lede measure                      */
  /* full-bleed = 100vw breakout; no token needed, but it MUST appear per page  */

  /* ── RADII — soft, "clay meets the ocean" rounded ─────────────────────────── */

  --radius-card:  24px;    /* floating cards (canon range 22–28; 24 is default)  */
  --radius-soft:  20px;    /* give-note / inset panels                           */
  --radius-pill:  100px;   /* buttons, chips                                     */
  --radius-photo: 22px;    /* image frames                                       */

  /* ── SHADOWS — soft FLOATING, warm-toned (NOT hard SaaS drop) ─────────────
     Tint the shadow with warm navy so cards float off the sand, not punch into
     it. The big diffuse one is the signature tactile move. */

  --shadow-float: 0 32px 64px -28px rgba(13,27,42,.28);  /* the floating card    */
  --shadow-soft:  0 18px 40px rgba(13,27,42,.13);        /* photo lift (shipped) */
  --shadow-lift:  0 40px 80px -32px rgba(13,27,42,.34);  /* hover state          */

  /* ── MOTION — ocean swell, never TikTok snap ──────────────────────────────── */

  --ease-swell: cubic-bezier(.22, 1, .36, 1);  /* slow rise-from-the-deep        */
  --dur-reveal: 0.9s;     /* fade-up reveal                                      */
  --dur-hover:  0.35s;    /* button/card hover                                  */

  /* ── TEXTURE — the handmade/crochet echo (kills the flat 3.5%-noise tell) ──
     Reference these; the canon specifies how to apply paper grain + the
     contour-line motif so surfaces feel tactile, not flat. */

  --grain-opacity: 0.06;  /* warm paper grain — up from the dead 0.035          */
}

/* selection + warm grain helper (apply on body::after per canon) */
::selection { background: var(--selection-bg); color: var(--selection-fg); }