/* 18Grams brand tokens.
 *
 * RULE 1 — a hex literal may appear only in TIER 1 below. Anywhere else in this repo it is a bug,
 * and `node brand/check-brand.mjs` says so by file and line.
 *
 * RULE 2 — every Tier 1 value is either MEASURED from logo/18LOGO.svg, or DERIVED from a measured
 * value by the transform written beside it. Nothing here is a value somebody liked the look of.
 * The transforms are channel-wise sRGB mixes, the same arithmetic CSS `color-mix(in srgb, …)` does:
 *   shade(C, p) = mix C toward #000000 by p percent
 *   tint(C, p)  = mix C toward #FFFFFF by p percent
 * The checker recomputes each derived value and fails when a literal drifts from its own transform.
 *
 * -> brand/18grams-brand-guideline.md   the document these values serve
 * -> brand/logo-palette.json            the measurement, and the digest of what it was measured on
 */

/* ---- TIER 1: primitives ------------------------------------------------------------------ */
:root {
  /* MEASURED — logo/18LOGO.svg, share of opaque pixels in logo-palette.json */
  --g-red: #FF0000;          /* 54.7% — the mark */
  --g-blush: #FBE7E7;        /* 18.0% */
  --g-rose: #D28585;         /* 10.8% — also a literal fill= in the SVG markup, so it is stated */
  --g-white: #FFFFFF;        /*  5.2% */

  /* DERIVED — each one names the transform that produces it */
  --g-red-deep: #A60000;     /* shade(--g-red, 35%)   — red that carries text at 4.5:1 */
  --g-ink: #1A0000;          /* shade(--g-red, 90%)   — a warm black, still the brand hue */
  --g-ink-surface: #1A1A1A;  /* shade(--g-white, 90%) — --g-ink's lightness for a full-screen ground */
  --g-ink-soft: #5F4D4D;     /* tint(--g-ink, 30%) */
  --g-ink-raised: #2C1414;   /* tint(--g-ink, 8%) */
  --g-ink-sunken: #0D0000;   /* shade(--g-ink, 50%) */
  --g-blush-deep: #E7D5D5;   /* shade(--g-blush, 8%) */
  --g-blush-soft: #BCADAD;   /* shade(--g-blush, 25%) */
  --g-rose-line: #9E6464;    /* shade(--g-rose, 25%)  — rose that clears 3:1 as a border */

  /* MEASURED — campaign/2026-08-21-ca-phe-pha-may.png, the Cà Phê Pha Máy price poster. The
   * Operator ruled on 2026-08-21 that the site was missing its blue, so these are brand, not
   * quarantine. They carry the accent band and nothing else. THE MARK NEVER SITS ON BLUE:
   * #FF0000 on #3924FF measures 1.82:1. */
  --c-blue: #3924FF;         /* 55.7% of that poster */
  --c-yellow: #FFE100;       /*  9.2% */
}

/* ---- TIER 2: semantics, light ------------------------------------------------------------ */
:root {
  --surface-canvas: var(--g-white);
  --surface-raised: var(--g-blush);
  --surface-sunken: var(--g-blush-deep);
  --surface-fill: var(--g-red-deep);

  --text-primary: var(--g-ink);
  --text-secondary: var(--g-ink-soft);
  --text-accent: var(--g-red-deep);
  --text-on-fill: var(--g-white);

  --border-default: var(--g-rose-line);
  --focus-ring: var(--g-red-deep);
  --display-mark: var(--g-red);

  /* THE BLUE FIELD. Not a stripe — the ground the page is mostly made of, the way the poster is.
   * Identical in both themes, because the poster is one artwork and does not have a night version. */
  --surface-accent: var(--c-blue);
  --text-on-accent: var(--g-white);
  --text-on-accent-soft: var(--g-blush);
  --display-on-accent: var(--c-yellow);
  --border-on-accent: var(--g-white);
  --fill-on-accent: var(--c-yellow);
  --label-on-fill-accent: var(--c-blue);

  /* THE PLATE IS A PHYSICAL WHITE LABEL, not a themed surface. The mark is printed on paper on the
   * bottle, and it is printed on paper here. Bound to the canvas it followed the dark theme and the
   * mark ended up in a black hole in the corner of the page. */
  --surface-plate: var(--g-white);
}

/* ---- TIER 2: semantics, dark ------------------------------------------------------------- *
 * Two blocks, deliberately identical in content: the attribute block wins over an explicit
 * choice, the media block covers the reader who never made one. They must agree, and the checker
 * fails when they stop agreeing. */
:root[data-theme="dark"] {
  --surface-canvas: var(--g-ink);
  --surface-raised: var(--g-ink-raised);
  --surface-sunken: var(--g-ink-sunken);
  --surface-fill: var(--g-red);

  --text-primary: var(--g-blush);
  --text-secondary: var(--g-blush-soft);
  --text-accent: var(--g-rose);
  --text-on-fill: var(--g-ink);

  --border-default: var(--g-rose);
  --focus-ring: var(--g-red);
  --display-mark: var(--g-red);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-canvas: var(--g-ink);
    --surface-raised: var(--g-ink-raised);
    --surface-sunken: var(--g-ink-sunken);
    --surface-fill: var(--g-red);

    --text-primary: var(--g-blush);
    --text-secondary: var(--g-blush-soft);
    --text-accent: var(--g-rose);
    --text-on-fill: var(--g-ink);

    --border-default: var(--g-rose);
    --focus-ring: var(--g-red);
    --display-mark: var(--g-red);
  }
}

/* ---- TIER 2: type ------------------------------------------------------------------------ */
:root {
  --font-display: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --size-shout: 5.5rem;
  --size-hero: 3rem;
  --size-h1: 2.25rem;
  --size-h2: 1.5rem;
  --size-body: 1.0625rem;
  --size-small: 0.875rem;

  --weight-body: 400;
  --weight-strong: 600;
  --weight-heavy: 800;

  --measure: 60ch;
  --leading-body: 1.6;
  --leading-display: 0.92;
  --track-shout: -0.03em;
  --track-label: 0.22em;
}