:root{
  /* ── Brand ─────────────────────────────────────────── */
  --grifon-orange:#FF7700;          /* the mark's square, the single accent */
  --grifon-orange-press:#d96400;    /* hover/press on filled orange */
  --grifon-orange-tint:rgba(255,119,0,.09);
  --grifon-orange-tint-strong:rgba(255,119,0,.22);
  --grifon-ink:#3f3f3f;             /* the mark's letterforms; headers, body */

  /* ── Neutrals (base scale) ─────────────────────────── */
  --bg:#ffffff;
  --bg2:#f6f6f6;
  --bg3:#eeeeee;
  --border:#d8d8d8;
  --border2:#bdbdbd;
  --text:#3f3f3f;
  --text2:#6b6b6b;
  --text3:#9e9e9e;
  --ink-invert:#ffffff;

  /* ── Semantic status ───────────────────────────────── */
  --green:#1a9e5a;
  --red:#d63c3c;
  --blue:#2566cc;
  --green-tint:rgba(26,158,90,.10);
  --red-tint:rgba(214,60,60,.10);
  --blue-tint:rgba(37,102,204,.10);

  /* ── Semantic aliases ──────────────────────────────── */
  --accent:var(--grifon-orange);
  --accent-lt:var(--grifon-orange-tint);
  --accent-md:var(--grifon-orange-tint-strong);

  --text-body:var(--text);
  --text-muted:var(--text2);
  --text-faint:var(--text3);
  --text-accent:var(--accent);
  --text-on-accent:#ffffff;

  --surface-page:var(--bg);
  --surface-card:var(--bg);
  --surface-subtle:var(--bg2);
  --surface-sunken:var(--bg3);
  --surface-inverse:var(--grifon-ink);

  --border-default:var(--border);
  --border-strong:var(--border2);
  --border-accent:var(--accent);

  --status-success:var(--green);
  --status-danger:var(--red);
  --status-info:var(--blue);
}