/* HEXA CONNECT — design tokens. Change colours here, nowhere else. */
:root {
  color-scheme: dark;

  --bg: #05050a;
  --surface: #0c0c14;
  --card: #11111c;
  --card-2: #171726;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);

  --text: #f3f3fa;
  --muted: #9b9bb3;
  --faint: #6c6c85;

  --violet: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6d28d9;
  --cyan: #22d3ee;
  --grad: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);

  --danger: #fb7185;
  --success: #34d399;
  --warning: #fbbf24;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --nav-h: 64px;
  --top-h: 56px;
  --banner-h: 0px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
}

/* A second basic theme, ready for the Phase 4 theme picker. */
[data-theme="slate"] {
  --bg: #0a0d12;
  --surface: #10151c;
  --card: #151b24;
  --card-2: #1b2330;
  --violet: #6366f1;
  --violet-600: #4f46e5;
  --violet-700: #4338ca;
  --cyan: #38bdf8;
  --grad: linear-gradient(135deg, #6366f1 0%, #38bdf8 100%);
}