/* === COLOR TOKENS ===
   Semantic roles, not ingredient names — the values below are kueh-lapis's
   own palette (see src/tokens/colors.js DEFAULT_THEME for the source of
   truth this must stay in sync with), used as the initial paint before JS
   runs and as the literal palette on kueh-lapis's own "kueh of the day".
   Every other day, src/organisms/kueh-of-day.js overwrites these via
   generatePalette(). */
:root {
  --color-primary-strong:  #B72E68;
  --color-primary:         #E8629A;
  --color-primary-soft:    #F8BFD9;
  --color-accent:          #F7D774;
  --color-surface:         #FFF8F0;
  --color-surface-tint:    #F0E8DA;
  --color-surface-border:  #D6C8B4;
  --color-highlight:       #8FCB5E;
  --color-highlight-soft:  #DCF0BE;

  --color-text-on-surface:        #5C1638;
  --color-text-on-surface-muted:  #8C4569;
  --color-text-on-primary:        #FBE0EC;
  --color-text-on-primary-muted:  #EDB7CE;
}

/* === METAL PALETTE ===
   Static, non-day-palette metal tones — unlike --color-accent/
   --color-highlight above (which rotate daily and feed the *liquid*
   chrome rim's glints, src/tokens/chrome-metal.js), these stay fixed so a
   *matte* metal surface reads as a consistent material regardless of
   which kueh is today's. --metal-base/--metal-base-cool sourced from
   wip/liquid-metal-buttons.html's own warm/cool metal prototype rather
   than invented fresh — --metal-base is that prototype's "warm" variant
   (a neutral steel, not literally warm-hued), --metal-base-cool its
   "cool" (blue-steel) variant. --metal-base-warm is new here (no wip
   precedent): a genuinely warm champagne-steel tone, added for
   .matte-metal-surface below, which wants a visible warm/cool tonal
   drift across the surface (like ambient color reflecting off brushed
   steel at a shallow angle) rather than a single flat metal tone.

   Two consumers so far: .rim-matte-inner / .rim-matte-inner-glint
   (styles/atoms.css) — the static counterpart to the liquid rim: same
   double-band structure as chrome-metal.js's applyLayeredConicChrome (a
   wider metal band + a thinner, more concentrated glint band), fixed
   gradients instead of a --chrome-angle-driven conic sweep. And
   .matte-metal-surface (styles/atoms.css) — a full matte steel panel
   background (soft ambient-light gradient + a subtle noise grain),
   currently applied to .kueh-of-day-section. Pick either wherever
   something shouldn't visually react to the cursor the way the liquid
   chrome system does. */
:root {
  --metal-highlight: #ffffff;
  --metal-base:      #6b6e78;
  --metal-base-warm: #8f8577;
  --metal-base-cool: #4c5570;
  --metal-shadow:    #34363d;
}

/* "Liquid chrome" treatment (src/tokens/chrome-metal.js) — a conic-gradient
   (closed shapes: .tab-group, step-cards) or one-shot linear-gradient (open/
   thin shapes: the site-nav divider, the "Machine" wordmark),
   never a *repeating* gradient. Earlier versions used repeating-linear-
   gradient tiled via background-size, which needs the tile width to line
   up exactly with the gradient's own cycle length or it shows a hard seam
   at every repeat — genuinely fixable with careful math, but conic/one-shot
   gradients don't tile at all, so there's structurally no seam to fix.
   Glints are placed with real per-element randomness (Math.random() in JS,
   different every load) clustered near the base gradient's own light/dark
   transitions, not two overlapping deterministic patterns faking
   organic-ness. --chrome-angle drives live rotation from cursor position
   and scroll on the conic (closed-shape) elements — that motion is most of
   what reads as "liquid" rather than a static metallic border. */
@property --chrome-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* --sheen-pos: the vertical-only cursor-tracking position behind
   .text-sheen/.icon-sheen (src/tokens/chrome-metal.js registerForSheen) —
   a separate, non-rotating cousin of --chrome-angle. The root default keeps
   text/icons legible before JS runs (or under prefers-reduced-motion,
   where registerForSheen never overrides it). */
:root {
  --sheen-pos: 50%;
}