/* Design tokens. Every colour, radius, shadow and font in the UI comes from here. */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg-0: #060918;
  --bg-1: #0d1431;
  --bg-2: #171c46;
  --glass-1: rgba(255, 255, 255, 0.07);
  --glass-2: rgba(255, 255, 255, 0.11);
  --glass-3: rgba(255, 255, 255, 0.17);
  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.25);

  /* text */
  --text: #e9edff;
  --text-strong: #ffffff;
  --muted: #9aa5cc;
  --faint: #6b7499;

  /* accents and status */
  --indigo: #7c83ff;
  --cyan: #22d3ee;
  --violet: #c084fc;
  --emerald: #34d399;
  --amber: #fbbf24;
  --rose: #fb7185;
  --grad-accent: linear-gradient(135deg, #7c83ff 0%, #22d3ee 100%);

  /* shape and depth */
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 24px 60px -24px rgba(2, 6, 23, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --focus: 0 0 0 3px rgba(34, 211, 238, 0.35);

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

  /* spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
}