/* Vataguess — design tokens
 *
 * Two layers, deliberately separated:
 *
 *   1. Palette  — raw values. Named for what they ARE.
 *   2. Roles    — semantic names. Named for what they DO.
 *
 * Components must only ever reference role tokens. A future visual direction
 * then changes the mapping in one place rather than every component, which is
 * what makes the dark-only decision reversible without a rewrite.
 *
 * Every palette value is taken from the wordmark's own construction in
 * tools/brand/logo.py — nothing here is invented for the interface:
 *
 *   --vg-black-900  GROUND    the ground the icon tiles are composed on
 *   --vg-black-800  KEYLINE   the wordmark's dark keyline
 *   --vg-black-700  RIM_LO    the wordmark's dark lower bevel edge
 *   --vg-silver-*   CHROME    stops sampled from the chrome ramp
 *
 * So the interface and the mark are drawn from one set of values rather than
 * two palettes that happen to resemble each other.
 *
 * See docs/DESIGN.md (Theme) and docs/WORDMARK.md.
 */

:root {
  /* Dark-only, by intent. This declaration is also what stops the browser
     rendering form controls, scrollbars and spellcheck UI in a light scheme.
     There is deliberately no prefers-color-scheme: light block anywhere in
     this file — see docs/DESIGN.md. */
  color-scheme: dark;

  /* ---- 1. Palette ----------------------------------------------------- */

  --vg-black-900: #17171a; /* GROUND  */
  --vg-black-800: #1b1b1b; /* KEYLINE */
  --vg-black-700: #333333; /* RIM_LO  */

  /* Contrast vs --vg-black-900 noted; all four clear WCAG AA for body text
     (4.5:1), and still clear it on --vg-black-800. */
  --vg-silver-100: #ffffff; /* 17.9:1 */
  --vg-silver-200: #d2d2d2; /* 11.8:1 */
  --vg-silver-400: #aaaaaa; /*  7.7:1 */
  --vg-silver-600: #8f8f8f; /*  5.5:1 */

  /* ---- 2. Roles ------------------------------------------------------- */

  --vg-field: var(--vg-black-900);        /* page background */
  --vg-surface: var(--vg-black-800);      /* raised surface */
  --vg-rule: var(--vg-black-700);         /* dividers, hairlines */

  --vg-text: var(--vg-silver-200);        /* body */
  --vg-text-emphasis: var(--vg-silver-100);
  --vg-text-secondary: var(--vg-silver-400);
  --vg-text-quiet: var(--vg-silver-600);  /* metadata, timestamps, status */

  --vg-focus: var(--vg-silver-100);
}

/* Baseline. Kept minimal on purpose: this is a token foundation, not a
   stylesheet for a site that does not exist yet. */
html {
  background: var(--vg-field);
  color: var(--vg-text);
}

/* Visible focus is not optional, and on a dark field it must not rely on the
   browser default, which assumes a light one. */
:focus-visible {
  outline: 2px solid var(--vg-focus);
  outline-offset: 2px;
}