/*
 * Wist design tokens — direction "Machine-made".
 * Source of truth: the "machine-made" design direction.
 *
 * Build-free: plain CSS custom properties, linked directly after fonts.css.
 *
 * The page is neutral. The passport is the one saturated object on it, so the accent hue is
 * the passport's own colour and is not spent elsewhere. Contrast figures are WCAG 2.x ratios
 * against --color-surface unless noted; see the board's contrast table.
 */

:root {
  /* ---------- Typography ---------- */
  /*
   * One family, two skeletons: Sans for headings and human prose, Mono for every field a machine
   * writes. Atkinson Hyperlegible was built so no character can be mistaken for another, which is
   * the property a passport full of fingerprints, scopes, and times needs most.
   */
  --font-sans: "Atkinson Hyperlegible Next", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --text-label-size: 11px; /* mono, uppercase, tracked */
  --text-label-line: 16px;
  --text-caption-size: 12px;
  --text-caption-line: 16px;
  --text-mono-size: 13px;
  --text-mono-line: 20px;
  --text-field-size: 14px; /* mono values on the passport */
  --text-field-line: 20px;
  --text-small-size: 14px;
  --text-small-line: 20px;
  --text-body-size: 16px;
  --text-body-line: 24px;
  --text-command-size: 18px; /* mono, the one command */
  --text-command-line: 28px;
  --text-h3-size: 20px;
  --text-h3-line: 28px;
  --text-h2-size: 24px;
  --text-h2-line: 32px;
  --text-h1-size: 40px;
  --text-h1-line: 44px;
  --text-display-size: 56px;
  --text-display-line: 60px;

  /* Atkinson is wider and more open than a neo-grotesk; it needs less negative tracking. */
  --tracking-display: -0.015em;
  --tracking-heading: -0.01em;
  --tracking-label: 0.08em;

  /* ---------- Color: surfaces and text ---------- */
  --color-surface: #fafafa; /* page */
  --color-surface-raised: #ffffff; /* controls, tables */
  --color-surface-sunken: #f2f2f3; /* wells, code */
  --color-surface-inverse: #0f1220; /* primary buttons */

  --color-text: #0f1220; /* 17.84:1 */
  --color-text-secondary: #4a4f5e; /* 7.82:1 */
  --color-text-tertiary: #696e7d; /* 4.87:1 */
  --color-text-inverse: #ffffff;

  --color-line: rgba(15, 18, 32, 0.12);
  --color-line-strong: rgba(15, 18, 32, 0.28);

  /* ---------- Color: the passport ---------- */
  --color-accent: #1b3ac8; /* cobalt; 8.09:1 as text on surface, 8.45:1 under white */
  --color-passport: var(--color-accent);
  --color-passport-drained: #4a4f5e; /* a revoked passport loses its colour; 8.17:1 under white */
  --color-on-passport: #ffffff;
  --color-on-passport-secondary: rgba(255, 255, 255, 0.72); /* 5.12:1 on cobalt and drained */
  --color-on-passport-ticks: rgba(255, 255, 255, 0.45); /* remaining hours; non-text */
  --color-on-passport-expiring: #ffd591; /* 6.11:1 on cobalt; ticks and time left under 3h only */

  /* ---------- Color: semantic ---------- */
  --color-danger: #b42318; /* Revoke control, errors; 6.30:1 */
  --color-caution: #805400; /* stale, expiring outside the card; 6.32:1 */

  --color-focus-ring: #0f1220;
  --color-selection: rgba(27, 58, 200, 0.16);

  /* ---------- Color: readiness states (Capability x Runtime), outside the passport ---------- */
  /* Ring shape carries the state; these colours reinforce it. On the passport every ring is white. */
  --color-state-declared: #696e7d;
  --color-state-installed: #4a4f5e;
  --color-state-authorized: #0f1220;
  --color-state-ready: #1b3ac8;
  --color-state-stale: #805400;
  --color-state-unsupported: #696e7d;

  /* ---------- Color: provenance and sharing ---------- */
  --color-provenance-fresh: #0f1220;
  --color-provenance-stale: #805400;
  --color-provenance-expired: #696e7d;
  --color-share-active: #1b3ac8;
  --color-share-revoked: #b42318;
  --color-authorization-required: #805400;

  /* ---------- Spacing (4-based) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --measure-body: 64ch;
  --layout-max: 1120px;
  --passport-max: 680px;
  --passport-label-column: 9ch;

  /* ---------- Radius ---------- */
  --radius-stamp: 2px;
  --radius-control: 6px;
  --radius-card: 12px;
  --radius-round: 999px;

  /* ---------- Elevation ---------- */
  /* The passport casts no shadow. Only dialogs lift. */
  --shadow-dialog: 0 12px 32px rgba(15, 18, 32, 0.12);

  /* ---------- Focus ---------- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* ---------- Z-index scale ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-dialog: 1100;
  --z-toast: 1200;

  /* ---------- Motion ---------- */
  --duration-fast: 180ms; /* feedback: hover, press, stamp landing */
  --duration-base: 240ms; /* colour drain, small enter/exit */
  --duration-hero: 600ms; /* the Handoff travelling */
  --stagger: 60ms;

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Passport grammar ---------- */
  --share-ticks: 24; /* one tick per hour of a default share */
}

/* Reduced motion: keep every state visible, remove the motion that reveals it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-hero: 0ms;
    --stagger: 0ms;
  }
}