/* Design tokens — Coinbase-derived.
   Nothing in app.css uses a raw hex; everything references a token from here. */

:root {
  /* --- Brand & accent --- */
  --primary: #0052ff;
  --primary-active: #003ecc;
  --primary-disabled: #a8b8cc;
  --accent-yellow: #f4b000;

  /* --- Surface --- */
  --canvas: #ffffff;
  --surface-soft: #f7f7f7;
  --surface-strong: #eef0f3;
  --surface-dark: #0a0b0d;
  --surface-dark-elevated: #16181c;

  /* --- Hairlines --- */
  --hairline: #dee1e6;
  --hairline-soft: #eef0f3;

  /* --- Text --- */
  --ink: #0a0b0d;
  --body: #5b616e;
  --muted: #7c828a;
  --muted-soft: #a8acb3;
  --on-primary: #ffffff;
  --on-dark: #ffffff;
  --on-dark-soft: #a8acb3;

  /* --- Semantics (text colour only, never a fill) --- */
  --semantic-up: #05b169;
  --semantic-down: #cf202f;

  /* --- Type --- */
  --font-sans: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Spacing (4px base) --- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-base: 16px;
  --space-md: 20px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 96px;

  /* --- Radius --- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 100px;
  --r-full: 9999px;

  /* --- Elevation: exactly one tier --- */
  --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.04);

  --container: 1200px;
}