/* =============================================================================
   Metrale design tokens for the book, brand v2.

   Every brand colour is read from the kit, never written here:
   css/metrale-brand.css (linked first) is generated by assets/brand/derive.mjs
   from the vendored kit's tokens/brand.json and declares each kit colour as
   --brand-<name>; the roles below name those. Only what the kit does not draw
   is a value of this file: the surface steps off the ground, hairlines, the
   text ramp's middle step, the UI status colours and the chart series.

   The colour roles (the kit's BRAND-GUIDELINES.md, with the owner's 2026-10-08
   rulings: copper-led, no cyan anywhere, violet only for product names):
     copper  the brand: the mark, the accent, links, focus rings
     violet  a product's name and nothing else
     green   a UI status (verified), amber a UI status (warning); not brand hues
   Copper itself (#C65A2E) is 4.4:1 on the ground and 4.3:1 on white, under the
   4.5:1 small text needs, so text and filled controls take the kit's two copper
   steps: copper-light on dark grounds, copper-deep on light ones. The mark
   keeps copper itself (it is not text).
   ========================================================================== */
:root {
  /* canvas + surfaces: lightness stepped off the kit's ground, hue preserved */
  --bg: var(--brand-ground);
  --bg2: #131922;         /* deeper: alt sections, insets */
  --card: #181F28;        /* raised card */
  --card-2: #1E2631;      /* a card on a card */
  --sunk: #090C10;        /* recessed: terminals, code, filename tabs */
  /* Hairlines. Solid rather than translucent, because these are used as fills
     in a few places as well as borders, and a translucent fill over a
     translucent section composites twice. */
  --border: #232A34;
  --border-strong: #2F3742;
  /* ink: the kit's ink, a body step, the kit's dark-ground grey. On --bg:
     15.0 / 12.2 / 5.75; the grey clears 5.1 on --card, so it may carry small
     text anywhere. */
  --t1: var(--brand-ink);
  --t2: #CFD1D6;
  --t3: var(--brand-gray-dark);
  /* the brand */
  --mark: var(--brand-copper);              /* the mark, never text */
  --accent: var(--brand-copper-light);      /* links, labels, anything copper read as text: 5.95 on --bg */
  --accent-deep: color-mix(in srgb, var(--brand-copper-light) 80%, #fff);  /* emphasis, link hover */
  --accent-fill: var(--brand-copper-light); /* solid backgrounds */
  --accent-fill-hover: color-mix(in srgb, var(--brand-copper-light) 85%, #fff);
  --on-accent: var(--brand-ground);         /* text on a filled accent */
  --accent-soft: color-mix(in srgb, var(--brand-copper) 18%, transparent);
  --product: var(--brand-violet);           /* a product's name as UI text */
  --focus: var(--accent);
  /* UI status, not brand hues: the kit draws none */
  --green: #12B981;             /* verified */
  --green-soft: rgba(18, 185, 129, 0.14);
  --amber: #E4C070;             /* warning */
  --red: #F87171;
  --red-soft: rgba(248, 113, 113, 0.12);
  /* Benchmark chart series: data colours, not brand hues. Colour follows the
     MODEL; which checkpoint owns which slug, and the measured separations, live
     in metrale.ai's site/src/lib/series-colors.js. */
  --vllm: #3B4350;              /* the other engine's chart series */
  --series-copper: #ee6f2f;
  --series-steel:  #2f88ee;
  --series-teal:   #51cdb0;
  --series-rose:   #cd517a;
  --series-citron: #d5e88a;
  --series-sky:    #a1e0f7;
  /* type: Manrope (the kit's face, self-hosted in fonts/), the kit's
     metric-matched fallback face, then the kit's fallbacks. Numbers, labels
     and code stay in IBM Plex Mono, which the kit does not replace. */
  --font-sans: 'Manrope', 'Manrope Fallback', 'Helvetica Neue', Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Plex Mono Fallback', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --heading-weight: var(--brand-heading-weight);
  /* elevation: on a dark canvas, shadow reads as depth only when it is black */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --shadow: 0 6px 24px rgba(0,0,0,0.42);
  --shadow-lg: 0 18px 50px rgba(0,0,0,0.55);
  color-scheme: dark;
}

/* Light theme: the kit's white ground and paper surface, its dark ink and
   graphite, copper-deep for copper text, fills and focus, the stronger violet
   for products. The book itself is dark in every mdBook theme (variables.css);
   this block is the palette's light half for any page that sets data-theme. */
[data-theme="light"] {
  color-scheme: light;
  --bg: var(--brand-white);
  --bg2: var(--brand-paper);
  --card: var(--brand-white);
  --card-2: #F0EEEA;
  --sunk: #F8F7F5;
  --border: #E4E2DD;
  --border-strong: #CBC8C1;
  --t1: var(--brand-ink-dark);
  --t2: var(--brand-graphite);
  /* the kit's light-ground grey (#6B7079) is 4.5:1 on paper and under it on --card-2; one step deeper */
  --t3: #63676F;
  --accent: var(--brand-copper-deep);       /* 6.36 on white */
  --accent-deep: color-mix(in srgb, var(--brand-copper-deep) 80%, #000);
  --accent-fill: var(--brand-copper-deep);
  --accent-fill-hover: color-mix(in srgb, var(--brand-copper-deep) 85%, #000);
  --on-accent: var(--brand-white);
  --accent-soft: color-mix(in srgb, var(--brand-copper) 12%, transparent);
  --product: var(--brand-violet-light);
  --green: #0A7956;
  --green-soft: rgba(11, 138, 98, 0.12);
  --amber: #856319;
  --red: #C92D37;
  --red-soft: rgba(201, 45, 55, 0.10);
  --vllm: #C5CAD3;
  /* Chart series on paper: the same six hue families, lightness lowered so each
     clears 4.6:1 on white (figures in metrale.ai's site/src/lib/series-colors.js). */
  --series-copper: #a2672c;
  --series-steel:  #466dc1;
  --series-teal:   #2d5b4c;
  --series-rose:   #832837;
  --series-citron: #565200;
  --series-sky:    #005977;
  --shadow-sm: 0 1px 2px rgba(15, 18, 22, 0.08);
  --shadow: 0 6px 24px rgba(15, 18, 22, 0.10);
  --shadow-lg: 0 18px 50px rgba(15, 18, 22, 0.14);
}