/*
 * Enclaven design tokens — the single source of truth for how the product
 * looks, shared by the extension popup, the auth-web ceremony pages, and the
 * marketing site.
 *
 * Values are the 2026-08-16 design handoff (`Extension Popup.dc.html` and the
 * six site pages beside it): warm paper, green ink for the things the product
 * does, and red reserved for the things it refuses.
 *
 * ## The semantic colours, one job each
 *
 *   --accent  the product acting. Primary buttons, links, the MATCH chip, the
 *             live-origin dot. This is the brand.
 *   --seal    refusal red. The NO MATCH chip, the resemblance warning, "don't
 *             approve". Never an ordinary error, never a destructive button,
 *             and never decoration — a user who sees this colour is being told
 *             the product said no.
 *   --hold    pending — a device awaiting approval, a setup step in flight.
 *             Not a warning and not an error: something is waiting on a person.
 *   --ledger  sealed / verified / receipted. Same green family as --accent
 *             because "we did it" and "it is done" are the same promise.
 *   --plate   structure and chrome. Never a status.
 *
 * ## Why --accent exists at all
 *
 * It used to not. `--seal` was the brand accent AND the refusal colour, on the
 * reasoning that a refusal should be the loudest the brand ever gets. The
 * redesign separates them, and the separation is worth stating: with one
 * colour doing both jobs, every primary button on every ordinary screen was
 * painted in the exact ink the refusal screen uses, which is how a warning
 * colour stops meaning anything. Red now appears on two screens and both of
 * them are a no.
 *
 * If you need a colour that is not here, the design has a gap — raise it
 * rather than inventing a hex value locally.
 */

:root {
  /* Grounds and rules */
  --paper: #fbfaf7;
  --sheet: #fbfaf7;
  --sheet-2: #ffffff;
  --rule: #eae7de;
  --rule-strong: #d8d4c8;

  /* Ink */
  --ink: #1b2620;
  --ink-2: #5c6b63;
  --ink-3: #8b948e;
  /* Quietest legible ink: the neutral status chip, and nothing smaller. */
  --ink-4: #9aa69f;

  /* The product acting — primary buttons, links, MATCH */
  --accent: #1e7a5a;
  --accent-hover: #176349;
  /* Legible green on a dark ground; also the "this tab is live" dot. */
  --accent-bright: #2e9a74;
  --accent-wash: #f2f9f5;
  --accent-edge: #cfe4da;
  --on-accent: #ffffff;

  /* Refusal red — the counterstamp, and every no */
  --seal: #8a1414;
  --seal-ink: #6e2020;
  --seal-wash: #fbf1f1;
  --seal-edge: #e6c9c9;
  --on-seal: #fff5f5;

  /* Structure and chrome. Never a status. */
  --plate: #40514a;
  --plate-wash: #f4f2ec;
  --plate-edge: #d8d4c8;
  --on-plate: #ffffff;

  /* Sealed / verified */
  --ledger: #1e7a5a;
  --ledger-wash: #f2f9f5;
  --ledger-edge: #cfe4da;

  /* Pending — waiting on a person */
  --hold: #7a5c00;
  --hold-wash: #fdf8f4;
  --hold-edge: #eee2da;

  /* Guilloché hatching */
  --hatch-a: rgba(27, 38, 32, 0.07);
  --hatch-b: rgba(27, 38, 32, 0);

  /* Browser chrome, for mockups and the gallery only */
  --chrome: #edeae2;
  --chrome-tab: #fbfaf7;
  --chrome-line: #d8d4c8;
  --omni: #ffffff;

  /* Product surfaces */
  --ui-bg: #fbfaf7;
  --ui-line: #eae7de;
  --ui-sunk: #ffffff;

  --shadow: 0 1px 2px rgba(27, 38, 32, 0.04), 0 6px 18px -10px rgba(27, 38, 32, 0.24);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.12);

  /*
   * 'Source Serif 4' and 'Public Sans' are the handoff's faces. They are named
   * FIRST and never fetched: the extension's CSP forbids a remote stylesheet or
   * a remote font file, and shipping two woff2 families into a 340px popup to
   * gain a serif is not a trade this surface wins. Where the user has them
   * (the marketing site links Google Fonts, and both are common on developer
   * machines) they are used; everywhere else the stack falls through to the
   * local faces this design was previously drawn in, which are metrically close
   * enough that no layout here depends on which one resolves.
   */
  --font-display:
    'Source Serif 4', 'Sitka Banner', 'Sitka Display', Charter, 'Bitstream Charter', Georgia, serif;
  --font-text: 'Source Serif 4', 'Sitka Text', Sitka, Charter, 'Bitstream Charter', Georgia, serif;
  --font-ui:
    'Public Sans', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue',
    Arial, sans-serif;
  --font-mono: Consolas, 'Cascadia Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --measure: 66ch;

  /*
   * The popup is a fixed-width surface in both Chrome and Edge, and 340px is
   * the width every screen in the handoff is drawn at.
   *
   * It is load-bearing for exactly one thing: the Recovery Kit prints four
   * five-character groups on a row and a group must never wrap (see the note
   * over `.cs-kit` in enclaven.css). Four groups measure ~220px against the
   * ~263px the kit card's content box gets at this width, so the guarantee
   * holds with room. Narrow this further and check that first.
   */
  --popup-width: 340px;
}

/*
 * Deliberately single-theme. This design is a printed artifact — warm paper and
 * green-black ink — and a dark inversion would break the metaphor the whole
 * identity rests on, including the counterstamp. Every colour is therefore set
 * explicitly and nothing is inherited from the host, so the surface holds on
 * any background.
 */