/* ==========================================================================
   Visa Bulletin Pages - design tokens (contract: DESIGN.md).
   Every raw color/space/radius value on the page lives in this file; every
   other stylesheet consumes these variables only.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Surface ladder: blue-black graphite (DESIGN.md 2) --- */
  --surface-canvas: #07080b;
  --surface-panel: #0c0e13;
  --surface-elevated: #13161d;
  --surface-hover: #1b1f2a;
  --surface-raise: #242a38;
  --zebra-fill: rgba(255, 255, 255, 0.016);

  /* --- Text (DESIGN.md 2) --- */
  --text-primary: #f5f7fa;
  --text-secondary: #cdd4e0;
  --text-tertiary: #8b93a3;
  --text-quaternary: #5f6675;

  /* --- Borders: hairlines carry depth, no drop shadows (DESIGN.md 7) --- */
  --border-default: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.16);
  --surface-edge: rgba(255, 255, 255, 0.04);

  /* --- Accent: interactive only - tabs, links, focus, the runway arrow --- */
  --accent-indigo: #5e6ad2;
  --accent-violet: #7170ff;
  --accent-hover: #828fff;
  --accent-ink: #ffffff;
  --accent-glow: rgba(94, 106, 210, 0.22);

  /* --- Movement semantics: green = tien, red = lui, gray = giu nguyen --- */
  --status-advance: #3ecf8e;
  --status-advance-bg: rgba(16, 185, 129, 0.12);
  --status-regress: #ff6369;
  --status-regress-bg: rgba(225, 72, 77, 0.14);
  --status-flat: #8a8f98;
  --status-flat-bg: rgba(255, 255, 255, 0.06);
  --pill-current-bg: rgba(113, 112, 255, 0.14);
  --pill-current-fg: #a5a3ff;
  --pill-unavailable-bg: rgba(226, 160, 63, 0.14);
  --pill-unavailable-fg: #f0b357;
  --pill-na-bg: #16213e;
  --pill-na-fg: #8ea2e6;

  /* --- Type: system stacks only - zero network font requests (DESIGN.md 3) --- */
  --font-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(2rem, 7vw, 3.75rem);
  --fs-h1: 1.375rem;
  --fs-h2: 1.125rem;
  --fs-body: 0.9375rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-micro: 0.6875rem;

  /* --- Spacing: 4px base (DESIGN.md 4) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Shape (DESIGN.md 5) --- */
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-pill: 9999px;

  /* --- Motion: every transition maps to a state (DESIGN.md 6) --- */
  --dur-micro: 120ms;
  --dur-standard: 200ms;
  --dur-emphasis: 400ms;
  --ease-out: ease-out;
  --ease-standard: ease-in-out;
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
}