/* CabiCAD marketing palette — the same colour system as the product.
 *
 * Every page here used to inline its own :root block with abbreviated names
 * (--mid / --wh / --oakL / --oakD) that no longer matched what the app called
 * the same colours. The values happened to be identical, but nothing enforced
 * that, and the vocabulary had already diverged. This file is the single source
 * of truth for the marketing site: same names, same values, same semantics as
 * apps/web/src/styles/index.css.
 *
 * Enforced by apps/web/src/styles/landing-tokens.selftest.ts, which parses this
 * file against the generated token table and fails the build if one drifts.
 *
 * Currently linked by index.html. letter/index.html, privacy.html and the
 * internal/ mocks still carry their own inline copies — they can adopt this file
 * by dropping their :root block and linking /tokens.css.
 *
 * Dark only, on purpose. The marketing site has no theme toggle and is a dark
 * brand surface; the app owns the light theme.
 */

:root {
  /* Tokens v2, dark column. The marketing site has no theme toggle and is a dark
     brand surface, so it takes one column rather than importing the generated
     stylesheet wholesale — but every value here is the DARK value of the token
     of the same name, and landing-tokens.selftest.ts fails the build if one
     drifts from the generated table.

     Surfaces. */
  --bg: #14161a;
  --panel: #1b1e24;
  --panel-2: #23272f;
  --canvas: #0f1114;

  /* Reading roles. Three, not four — v2 is explicit that a fourth level means
     the layout is too dense. */
  --text-primary: #eef1f5;
  --text-secondary: #a4adba;
  --text-hint: #8791a0;

  /* Accent. The oak gold is retired across the product; the chrome accent is
     --primary and the canvas selection is --geo-selected. */
  --primary: #4c8dff;
  --primary-hover: #3d7cf0;
  --primary-press: #3670e0;
  --on-primary: #0b1220;
  --border: #333a45;
  --border-strong: #444d5a;

  /* Geometry, for the marketing screenshots and diagrams that show the editor. */
  --geo-line: #eef1f5;
  --geo-selected: #8ab4ff;
  --geo-construction: #8791a0;

  /* Semantic states. Marker for fills and badges, text for words — a filled
     badge passes at lower contrast than a word does. */
  --danger-marker: #e5484d;
  --danger-text: #ff8285;
  --warn-text: #f5c063;
  --ok-text: #3ecf8e;

  /* AI-origin violet. Reserved: the design system gives this one meaning across
     every surface (§1), so nothing else on the site may wear it — see the tier
     badges below, which are held ΔE ≥ 20 away from it. */
  --ai: #a78bfa;

  /* Numeric type (02-DEC-006). Same finding as the app: DM Sans ships no 'tnum'
   * feature and its digits are proportional, so the tabular-nums on the live
   * waitlist counter was doing nothing and the pill re-flowed on every update.
   *
   * Deliberately NOT the app's value. The app pulls in Inter because it needs a
   * proportional face for dense panel text; this page already loads IBM Plex
   * Mono for its technical accents, and a monospace face is inherently tabular —
   * so the fix costs nothing here, where a sixth webfont on a marketing page
   * would be the expensive way to buy the same alignment. */
  --font-numeric: 'IBM Plex Mono', ui-monospace, monospace;

  /* Pricing-tier badges — categorical, one hue per tier.
   *
   * Re-derived for tokens v2. The previous set was Starter teal and Pro gold,
   * chosen when the brand was gold and the only blue on the page was --ai. The
   * rebrand broke it twice over: Pro became the brand blue, which sits ΔE 7.2
   * from the AI violet under deuteranopia, and Starter's teal fell to ΔE 13.3
   * from the neutral Free badge — the two tiers a visitor is most likely to be
   * comparing, rendered as the same badge.
   *
   * These are a categorical set, not semantics, so they come from Okabe-Ito —
   * the same source as the app's 3D hover hues, for the same reason. The ladder
   * ascends grey → green → vermillion → gold, and every pair clears ΔE 20 under
   * normal, protanopia and deuteranopia, worst pair 23.5, with every accented
   * tier at least that far from --ai.
   *
   * NOTE: no tier may take the brand blue while --ai is violet. That constraint
   * is the reason this set contains no blue at all — see FLAGS.md #16. */
  --tier-free: var(--text-secondary);
  --tier-starter: #009E73;
  --tier-designer: #D55E00;
  --tier-pro: #F0E442;
}