/*
 * cupof.ai — theme tokens. THE single definition of the Ember palette.
 *
 * Two consumers, one file, so they cannot drift:
 *
 *   1. The SPA — web/src/index.css `@import`s this file, so Vite inlines it into the built
 *      CSS bundle. Tailwind's `@theme inline` block there maps these raw properties onto the
 *      semantic utilities (bg-ground, text-ink, border-edge, ...).
 *   2. The server-rendered pages — /blog, /docs, /docs/api, /about and /live link this file
 *      from web/dist (Vite copies web/public verbatim).
 *
 * THREE theme states, in priority order:
 *   data-theme="dark"  >  data-theme="light"  >  prefers-color-scheme  >  light default
 * Light values live on bare :root and are never re-declared inside a guard; dark re-maps the
 * same properties twice — once for the system preference (unless light is explicitly pinned)
 * and once for the explicit toggle, which always wins. Keep the two dark blocks identical:
 * web/test/themeTokens.test.ts compares their NAMES AND THEIR VALUES.
 *
 * Every consumer must go through the token, never the literal hex: a hex in a component is a
 * colour that stays light when the page goes dark.
 */

:root {
  /*
   * Type (spec §5). The faces are declared in cupof-fonts.css, self-hosted. These stacks NAME them:
   *   --cup-font          Geist, the text face: body, and so everything you read
   *   --cup-font-display  Bricolage Grotesque 700: h1–h3, the wordmark, room titles
   *   --cup-font-mono     Geist Mono 400/500: code, keys, claims, names, timestamps, labels
   * Each stack ends in a generic family, so a glyph outside latin/latin-ext (the only subsets
   * shipped) still draws in a system face instead of as a blank.
   */
  --cup-font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cup-font-display: 'Bricolage Grotesque', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --cup-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /*
   * Surfaces. Three rungs, deliberately close together: ground/panel is 1.05:1 here and
   * 1.06:1 in dark. Elevation is carried by the step itself, never by a shadow — Ember has
   * no offset, no blur and no glow. `--panel` is always the LIGHTER of the two, in both
   * themes, which is what lets a recessed well drop to `--ground` and still read as sunken.
   */
  --ground: #FAF9F7;
  --panel: #FFFFFF;
  --chip: #F1EFEA;

  /*
   * Two line tokens, because WCAG 1.4.11 asks 3:1 only of a boundary that is the ONLY way to
   * perceive a control — not of a decorative rule.
   *
   *   --line  a divider. ~1.3:1 on purpose. Never the sole indicator of anything.
   *   --edge  a control's own boundary: inputs, the composer, secondary buttons. Clears 3:1.
   *
   * These are the rebrand's sharpest trap. Before Ember, `--line` WAS the control boundary
   * (the latte palette's ink, at 13:1) and `--soft-line` was the divider. The names
   * survived; the meanings swapped. Anything that used to say `--line` and is a control now
   * wants `--edge`.
   */
  --line: #E2DFD8;
  --edge: #888D96;

  /* Ink. --ink-quiet is a REAL text colour at 5.89:1 on the ground — unlike the retired
   * --dim it replaces, which failed AA everywhere and is why quietRegister.test.ts exists. */
  --ink: #15161A;
  --ink-quiet: #5E6169;

  /*
   * The one accent, at two temperatures of the same fire (hue 28).
   *
   *   --accent       marks and text: links, agent names, the live dot, focus, selection.
   *                  Must darken in light — #F1801E on this ground is 2.54:1, below even the
   *                  3.0 non-text floor, so it cannot be a link or a dot here.
   *   --accent-fill  the hot ember itself, IDENTICAL in both themes. It is the one place the
   *                  full-strength brand colour appears on a light page.
   *   --accent-edge  the keyline that carries a filled control's boundary where the fill
   *                  cannot: #F1801E on this ground is 2.54:1, so a light primary button with
   *                  no border has no boundary. In dark this equals the fill and is a no-op.
   */
  --accent: #A65107;
  --accent-fill: #F1801E;
  --accent-edge: #A65107;
  --on-accent: #17130A;

  /*
   * Danger is a separate colour on purpose and always has been: the old accent as 16px/700
   * text measured 2.94:1, so the one control in the product that deletes things was the least
   * legible on the page. Ember keeps them apart — and far apart in hue, so an orange link and
   * a red delete never read as the same thing.
   */
  --danger: #C42B2B;
  --danger-fill: #C42B2B;
  --on-danger: #FFFFFF;

  /*
   * The modal backdrop is a FIXED dark value in both themes. "The ground at alpha" is right
   * in dark and wrong here: a near-white wash at 60% does not back a modal, it bleaches the
   * page. Not pure black, which the served-HTML guard forbids and which reads as a hole.
   */
  --scrim: rgba(12, 13, 15, 0.6);

  /*
   * Syntax highlighting (highlight.js token classes). The failure in the latte set was never
   * contrast, it was HUE: seven of nine values sat in the accent's own band, so an
   * attribute-heavy fence read as a wall of links. These are spread across the wheel and away
   * from #A65107, and every one clears 4.5:1 on both the panel and the chip.
   */
  --hl-base: #15161A;
  --hl-comment: #5E6169;
  --hl-keyword: #A21D6E;
  --hl-string: #1F6B33;
  --hl-number: #6B5A00;
  --hl-title: #6A3DB8;
  --hl-attr: #11559E;
  --hl-type: #0F6B72;
  --hl-meta: #6A5E4C;

  /*
   * The restored mascot's page-facing inks (gmax, 2026-09-24: "Original latte colours"). Not Ember
   * tokens: the literal latte values the inline mascot rendered in at 5ba185e, used only by the
   * .mascot-* rules in web/src/index.css. They live here so the mascot themes on the same three
   * states as everything else. web/test/retirements.test.ts allows latte hexes in these
   * declarations, by name, and nowhere else in this file.
   */
  --mascot-line: #2B1B12;
  --mascot-shadow: #2B1B12;
  --mascot-spark: #E4572E;

  /*
   * The /brand page's two swatch grounds: the light and the dark --ground, CONSTANT in every theme
   * on purpose and so declared here only, never in the dark blocks. That page draws the logo and the
   * mascot on both grounds at once, whichever theme the reader is in. Nothing else may use them:
   * a surface that should follow the theme wants --ground.
   */
  --swatch-light: #FAF9F7;
  --swatch-dark: #0C0D0F;

  color-scheme: light;
}

/*
 * Dark. Declared once and applied under both guards below — keep the two blocks identical in
 * names AND values; a value that lands in only one of them means the system-preference reader
 * and the toggle reader see different pages.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground: #0C0D0F;
    --panel: #141518;
    --chip: #1E2025;

    --line: #26282D;
    --edge: #656972;

    --ink: #F3F3F1;
    --ink-quiet: #8B8E95;

    /* In dark the fill clears 7.26:1 against the ground, so it is its own boundary and
     * --accent-edge simply equals it. The declaration stays unconditional. */
    --accent: #F1801E;
    --accent-fill: #F1801E;
    --accent-edge: #F1801E;
    --on-accent: #17130A;

    --danger: #FF6B6B;
    --danger-fill: #FF6B6B;
    --on-danger: #17130A;

    --scrim: rgba(12, 13, 15, 0.6);

    --hl-base: #F3F3F1;
    --hl-comment: #8B8E95;
    --hl-keyword: #F2A0D0;
    --hl-string: #89D185;
    --hl-number: #D9C46B;
    --hl-title: #B39DFF;
    --hl-attr: #79B8F5;
    --hl-type: #5FCBC4;
    --hl-meta: #B0A390;

    /* The latte dark mascot: a foam outline, no offset shadow (latte dark cast none), the dark spark. */
    --mascot-line: #E8D9BE;
    --mascot-shadow: transparent;
    --mascot-spark: #FF6B3D;

    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --ground: #0C0D0F;
  --panel: #141518;
  --chip: #1E2025;

  --line: #26282D;
  --edge: #656972;

  --ink: #F3F3F1;
  --ink-quiet: #8B8E95;

  /* In dark the fill clears 7.26:1 against the ground, so it is its own boundary and
   * --accent-edge simply equals it. The declaration stays unconditional. */
  --accent: #F1801E;
  --accent-fill: #F1801E;
  --accent-edge: #F1801E;
  --on-accent: #17130A;

  --danger: #FF6B6B;
  --danger-fill: #FF6B6B;
  --on-danger: #17130A;

  --scrim: rgba(12, 13, 15, 0.6);

  --hl-base: #F3F3F1;
  --hl-comment: #8B8E95;
  --hl-keyword: #F2A0D0;
  --hl-string: #89D185;
  --hl-number: #D9C46B;
  --hl-title: #B39DFF;
  --hl-attr: #79B8F5;
  --hl-type: #5FCBC4;
  --hl-meta: #B0A390;

  /* The latte dark mascot: a foam outline, no offset shadow (latte dark cast none), the dark spark. */
  --mascot-line: #E8D9BE;
  --mascot-shadow: transparent;
  --mascot-spark: #FF6B3D;

  color-scheme: dark;
}