/* =============================================================
   CABOO · CANON — tokens.css
   The single source of design decisions. Every page inherits
   from here. Nothing in this file paints; it only declares.
   Light is primary; dark is punctuation (see [data-surface]).
   ============================================================= */

:root {
  /* ---- color · light canvas (primary) ---- */
  --canvas:      #ffffff;   /* page ground */
  --canvas-warm: #faf8f4;   /* warm band — alternating sections */
  --surface:     #ffffff;   /* raised paper — cards, artifacts */
  --ink:         #1a1613;   /* warm near-black — headline payoff, primary text */
  --ink-2:       #6f675c;   /* warm gray — setup lines, body, secondary */
  --ink-3:       #9c958a;   /* faint warm gray — captions, meta */

  --coral-1:     #f8836b;   /* bright coral — gradient top, on-photo */
  --coral-2:     #f25e40;   /* primary coral — gradient base, the action */
  --coral-ink:   #d8492c;   /* deeper coral — small coral text on white */

  --rule:        rgba(26, 22, 19, .12);   /* hairline divider / border */
  --rule-soft:   rgba(26, 22, 19, .07);   /* faintest divider */

  /* ---- semantic states · warm-tuned, kept clear of the coral budget ---- */
  --good:        #5d7544;   /* olive — pass / live / present */
  --good-tint:   rgba(93, 117, 68, .10);
  --good-line:   rgba(93, 117, 68, .32);
  --watch:       #a07414;   /* golden ochre — caution / partial / pending */
  --watch-tint:  rgba(160, 116, 20, .10);
  --watch-line:  rgba(160, 116, 20, .30);
  --crit:        #9a3520;   /* brick — gap / fail / blocked (browner than coral) */
  --crit-tint:   rgba(154, 53, 32, .09);
  --crit-line:   rgba(154, 53, 32, .28);

  /* ---- semantic aliases · the vocabulary components speak (roles over primitives) ----
     Components consume these; primitives stay private to this file. CSS resolves var()
     at the declaring scope, so the dark beat re-points these aliases against the dark
     primitives (see the [data-surface="dark"] block). Components still carry no dark code. */
  --text-primary:   var(--ink);          /* headlines, primary text */
  --text-secondary: var(--ink-2);        /* body, setup lines */
  --text-muted:     var(--ink-3);        /* captions, meta */
  --text-inverse:   #ffffff;             /* text that must stay white over imagery */
  --surface-base:   var(--canvas);       /* page ground */
  --surface-warm:   var(--canvas-warm);  /* alternating band */
  --surface-raised: var(--surface);      /* cards, paper */
  --action:         var(--coral-2);      /* the one action color */
  --action-text:    var(--coral-ink);    /* coral as small text on light */
  --border:         var(--rule);         /* hairline border or divider */
  --border-soft:    var(--rule-soft);    /* faintest divider */

  /* ---- type · families ---- */
  --font-display: "ABC Arizona Flare", Georgia, "Times New Roman", serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- type · scale (fluid) ---- */
  --text-hero:     clamp(2.25rem, 4.9vw, 4rem);    /* hero h1 */
  --text-display:  clamp(2rem, 4.4vw, 3.5rem);     /* section h2 */
  --text-title:    clamp(1.4rem, 2vw, 1.9rem);     /* card / h3 */
  --text-subtitle: clamp(1.15rem, 1.5vw, 1.4rem);  /* h4 / lead-in */
  --text-lede:     clamp(1.02rem, 1.1vw, 1.18rem); /* standfirst */
  --text-body:     1rem;                           /* 16px base */
  --text-small:    .9rem;                          /* secondary UI */
  --text-label:    .72rem;                         /* mono eyebrow / label */
  --text-micro:    .66rem;                         /* mono fine print */

  /* ---- type · rhythm ---- */
  --leading-tight:   1.06;   /* display */
  --leading-snug:    1.2;
  --leading-normal:  1.5;    /* body */
  --leading-relaxed: 1.65;   /* long-form prose */

  --tracking-display: -.012em;
  --tracking-tight:   -.01em;
  --tracking-label:   .16em;  /* mono eyebrow */
  --tracking-wide:    .2em;   /* mono fine label */

  /* ---- space · 4-based scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-section: clamp(78px, 12vh, 148px);

  /* ---- layout ---- */
  --container:       1240px;   /* full editorial width */
  --container-prose: 720px;    /* long-form reading measure */
  --pad:   clamp(20px, 5vw, 56px);
  --frame: clamp(6px, 0.7vw, 12px);   /* photo bands inset from screen edges */

  /* ---- radius ---- */
  --radius-xs:   6px;    /* buttons, small controls */
  --radius-sm:   10px;   /* inputs, small cards */
  --radius-md:   14px;   /* artifact / card */
  --radius-lg:   18px;   /* nav rail, large panels */
  --radius-xl:   clamp(16px, 1.6vw, 22px);  /* hero photo band */
  --radius-pill: 999px;  /* badges, dots */
  --hero-radius: var(--radius-xl);          /* alias — legacy name */

  /* ---- shadow ---- */
  --shadow-btn:  0 1px 2px rgba(210, 73, 44, .25), 0 8px 24px -10px rgba(210, 73, 44, .45);
  --shadow-card: 0 1px 2px rgba(26, 22, 19, .04), 0 22px 48px -28px rgba(26, 22, 19, .22);
  --shadow-nav:  0 1px 2px rgba(26, 22, 19, .05), 0 16px 36px -22px rgba(26, 22, 19, .45);
  --shadow-pop:  0 2px 6px rgba(26, 22, 19, .08), 0 20px 50px -20px rgba(26, 22, 19, .35);

  /* ---- form ---- */
  --field-bg:           var(--surface);
  --field-border:       var(--rule);
  --field-border-hover: rgba(26, 22, 19, .24);
  --field-radius:       var(--radius-sm);
  --field-pad:          12px 14px;
  --ring:               0 0 0 3px rgba(242, 94, 64, .20);  /* coral focus halo */

  /* ---- motion ---- */
  --ease:     cubic-bezier(.2, .7, .2, 1);   /* the house easing */
  --ease-out: ease;
  --dur-fast:   .15s;
  --dur-quick:  .2s;
  --dur-base:   .3s;
  --dur-slow:   .4s;
  --dur-reveal: .7s;
  --dur-rise:   .9s;

  /* ---- z-index ---- */
  --z-nav:     50;
  --z-sheet:   40;
  --z-pop:     60;
  --z-overlay: 100;

  /* ---- frosted glass (white-context surfaces) ---- */
  --glass:      rgba(255, 255, 255, .82);
  --glass-line: rgba(26, 22, 19, .12);

  /* ---- materials · the finish layer (felt, not seen — see CANON §9) ----
     Each material is bound to one surface and driven by a token, so the dark
     beat steps it down through the remap below. Components carry no dark code;
     nothing here animates. */
  --grain:       url("../img/grain.svg");   /* shared noise — hero scrim + paper tooth */
  --grain-paper: .04;                        /* tooth opacity on raised paper */
  --grain-blend: multiply;                   /* ink settling into light stock */
  --edge-light:  inset 0 1px 0 rgba(255, 255, 255, .55);  /* rim light on a lifted surface */
  --wash-warm:   radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .55), transparent 62%);  /* light on a warm band */
  --sheen:       linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 42%);   /* varnish on the one action */
  --glass-blur:  blur(20px) saturate(150%);  /* the one screen-material */
}

/* =============================================================
   DARK — punctuation only. Apply data-surface="dark" to a
   footer or feature band and the local token context flips;
   every component that reads the semantic tokens adapts.
   This block only re-declares tokens — painting lives in
   system.css so tokens.css stays declaration-only.
   ============================================================= */
[data-surface="dark"] {
  --canvas:      #161210;
  --canvas-warm: #1e1813;
  --surface:     #211a15;
  --ink:         #f4ece0;
  --ink-2:       #b8ab9b;
  --ink-3:       #8a8073;

  --coral-ink:   #f8836b;   /* lift coral text for dark legibility */

  --rule:        rgba(244, 236, 224, .14);
  --rule-soft:   rgba(244, 236, 224, .08);

  --good:        #8fae6a;   /* lifted olive */
  --good-tint:   rgba(143, 174, 106, .14);
  --good-line:   rgba(143, 174, 106, .40);
  --watch:       #d0a04a;   /* lifted ochre */
  --watch-tint:  rgba(208, 160, 74, .14);
  --watch-line:  rgba(208, 160, 74, .38);
  --crit:        #d9745a;   /* lifted brick */
  --crit-tint:   rgba(217, 116, 90, .16);
  --crit-line:   rgba(217, 116, 90, .42);

  --field-border-hover: rgba(244, 236, 224, .28);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 28px 60px -30px rgba(0, 0, 0, .7);
  --glass:      rgba(22, 18, 16, .72);
  --glass-line: rgba(244, 236, 224, .14);

  /* materials step down on the dark beat: grain lifts to light specks, rim light
     and warm wash drop almost to nothing. (--sheen, --glass-blur, and --grain
     hold — they do not move in dark — so they are not restated.) */
  --grain-paper: .05;
  --grain-blend: screen;
  --edge-light:  inset 0 1px 0 rgba(244, 236, 224, .06);
  --wash-warm:   radial-gradient(120% 80% at 50% 0%, rgba(244, 236, 224, .04), transparent 62%);

  /* re-point the semantic aliases against the dark primitives above. CSS substitutes
     var() at the declaring scope, so aliases must be restated here or any component
     reading them would stay light inside a dark beat. This block is the system's only
     parallel-dark code; components carry none. (--text-inverse stays #fff and --action
     stays --coral-2 — neither moves in dark — so neither is restated.) */
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);
  --surface-base:   var(--canvas);
  --surface-warm:   var(--canvas-warm);
  --surface-raised: var(--surface);
  --action-text:    var(--coral-ink);
  --border:         var(--rule);
  --border-soft:    var(--rule-soft);
}