/* ===========================================================================
   PALETTE v2 — storefront-v2 additive layer
   ---------------------------------------------------------------------------
   Enqueue AFTER tokens.css and BEFORE primitives.css.

   WHY THIS IS A SEPARATE FILE, NOT AN EDIT TO tokens.css:
   tokens.css carries "GENERATED by scripts/build-tokens.mjs — do not edit by
   hand. Source: tokens/*.tokens.json". Anything added there is lost the next
   time the Next.js clone regenerates and the file is re-copied into this kit.
   These additions live here until they are promoted into the JSON token
   source upstream, at which point this file can be deleted wholesale.

   WHAT PROBLEM THIS SOLVES:
   The storefront had exactly one brand-owned colour (brand blue) sitting on a
   field of warm neutrals. Every other colour in the system was a status
   colour or a grey, which is why the page read flat. See
   competitor-analysis/SYNTHESIS.md §5.

   THE LAW:
     Blue acts.  Ochre measures.  Green confirms stock.  Nothing else is coloured.

     --brand*   every CTA, focus ring, active state, link
     --ochre*   every number that came off a label — doses, counts, lot codes,
                prices in spec context, mono eyebrows, spec-panel keylines.
                NEVER a CTA.
     --green*   in-stock only. Never decorative. (unchanged, reserved)
     --cat-*    category identity only, at ~12% fill behind typographic cards

   CONTRAST — measured, not assumed (scratchpad/oklch.py, 2026-08-16):
     ochre-300 on neutral-1000  11.51:1   keylines
     ochre-400 on neutral-1000   9.54:1   THE data pairing
     ochre-700 on neutral-25     6.52:1   ochre text on light
     ochre-500 on neutral-25     2.88:1   <-- FAILS. Fills/borders only, never text on light.
     brand-500 on neutral-1000   3.17:1   <-- FAILS body. Large text only. Use brand-400 on dark.

   NOTE ON DARKS: an "ink-blue" dark family was considered and rejected. The
   brand rule in wp-master-kit/README.md is "dark surfaces use the warm
   hue-54-62 neutrals, never cool slate", and warm near-black carrying ochre
   mono data reads more like an instrument than blue-black would. Dark bands
   keep using --p-neutral-900/950/975/1000 exactly as before.
   =========================================================================== */

:root {
  /* --- OCHRE: the second brand colour. Hue 72-78 harmonises with the warm
         neutral ramp (hue 54-85) rather than fighting it. -------------------- */
  --p-ochre-100: oklch(0.940 0.040 78);   /* #FAE9CE  tint fills */
  --p-ochre-300: oklch(0.830 0.095 76);   /* #EBBF80  keylines, rules on dark */
  --p-ochre-400: oklch(0.775 0.120 75);   /* #E2AA57  mono data on dark */
  --p-ochre-500: oklch(0.680 0.130 74);   /* #C78B29  fills/borders ONLY — fails as text on light */
  --p-ochre-700: oklch(0.480 0.098 72);   /* #7F530C  mono data on light */

  /* --- CATEGORY TINTS: six hues at fixed L 0.660 / C 0.090 so they read as
         one harmonious set, never as six competing brands. These REPLACE the
         stock category textures entirely (SYNTHESIS: the single loudest
         unfinished-template signal on the site).
         Metabolic is hue 168 (teal), deliberately NOT 152 — that is the
         reserved signal green. ---------------------------------------------- */
  --p-cat-foundation:  oklch(0.660 0.090 264);  /* #7692CA */
  --p-cat-performance: oklch(0.660 0.090 74);   /* #B38A51 */
  --p-cat-recovery:    oklch(0.660 0.090 300);  /* #9B86C1 */
  --p-cat-cognitive:   oklch(0.660 0.090 210);  /* #44A1B1 */
  --p-cat-metabolic:   oklch(0.660 0.090 168);  /* #55A488 */
  --p-cat-longevity:   oklch(0.660 0.090 30);   /* #C37D71 */

  /* --- SEMANTIC ALIASES: components consume these, never the --p-* directly,
         so a rebrand stays a one-block change. ------------------------------- */
  --data-accent:       var(--p-ochre-700);  /* light context is the default */
  --data-accent-fill:  var(--p-ochre-100);
  --rule:              var(--p-ochre-500);
  --band-ink:          var(--p-neutral-1000);
  --band-ink-2:        var(--p-neutral-975);
}

/* On dark surfaces the data accent and rule step up in luminance. Applies to
   the .dark skin and to any band that opts in with data-band="ink". */
.dark,
[data-band="ink"] {
  --data-accent:      var(--p-ochre-400);
  --data-accent-fill: oklch(0.775 0.120 75 / 0.14);
  --rule:             var(--p-ochre-300);
}

/* ---------------------------------------------------------------------------
   UTILITIES — the mono-data idiom, one implementation.
   "Mono = data, always tabular-nums" is an existing brand law; these give it a
   single home so it stops being re-declared per component.
   --------------------------------------------------------------------------- */

.u-data {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  color: var(--data-accent);
  letter-spacing: 0.01em;
}

/* Key/value pair as used on spec panels, hero chips and the ticker. */
.u-data-key {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.u-rule { border-color: var(--rule); }

/* Category tint, applied via data-cat on a card. Fill only — text keeps the
   normal ink tokens so contrast never depends on the tint. */
[data-cat="foundation"]  { --cat: var(--p-cat-foundation); }
[data-cat="performance"] { --cat: var(--p-cat-performance); }
[data-cat="recovery"]    { --cat: var(--p-cat-recovery); }
[data-cat="cognitive"]   { --cat: var(--p-cat-cognitive); }
[data-cat="metabolic"]   { --cat: var(--p-cat-metabolic); }
[data-cat="longevity"]   { --cat: var(--p-cat-longevity); }

.u-cat-fill {
  background: color-mix(in oklab, var(--cat, var(--p-brand-500)) 12%, transparent);
  border-color: color-mix(in oklab, var(--cat, var(--p-brand-500)) 28%, transparent);
}

.u-cat-ink { color: var(--cat, var(--p-brand-500)); }