/**
 * CryptoGate Institutional Ink — canonical CSS tokens (guest pay)
 * Keep in sync with apps/web/src/styles/tokens.css — see doc/UI-Tokens.md
 */

:root {
  /* Surfaces */
  --bg: #0b0f14;
  --surface: #12181f;
  --sidebar: #0f1319;
  --border: #1e2a36;
  --border-strong: #2a3a4a;
  --glass: rgba(255, 255, 255, 0.1);
  --line: var(--border);

  /* Brand + status (keep in sync with apps/web tokens.css) */
  --teal: #00d4c8;
  --teal-hover: #00f1e6;
  --teal-pressed: #00b2aa;
  --teal-dim: rgba(0, 212, 200, 0.12);
  --accent: var(--teal);
  --plat-gold: #f0b429;
  --plat-gold-bright: #fbbf24;
  --warn: #ffb703;
  --anomaly: #ff5a6a;
  --ok: #00e676;
  --ok-dim: rgba(0, 230, 118, 0.12);
  --warn-dim: rgba(255, 183, 3, 0.12);
  --anomaly-dim: rgba(255, 90, 106, 0.12);
  --muted: #8a9bb0;
  --footer: #5a6a7a;
  --text: #ffffff;
  --ink: #ffffff;

  --control-h: 40px;
  --control-h-lg: 48px;
  --control-h-sm: 32px;
  --focus-ring: 0 0 0 2px var(--teal);

  /* Type */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-ui: "Geist Sans", "Outfit", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Radius + space */
  --radius-sm: 8px;
  --radius-card: 12px;
  --radius-lg: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Motion */
  --motion-micro: 120ms;
  --motion-ui: 280ms;
  --motion-emphasis: 600ms;
  --motion-page: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);

  /* Responsive breakpoints (keep in sync with apps/web tokens.css) */
  --bp-phone: 640px;
  --bp-tablet: 1100px;
}