/* Design tokens extracted from the Atoll design mockup (Claude Design
   project f3c3f984-3a37-4d50-a87e-f4ca98cd4e2f, Atoll.dc.html). */
:root {
  --font-sans: 'Inter', sans-serif;

  --color-text: oklch(22% 0.02 260);
  --color-text-secondary: oklch(45% 0.02 260);
  --color-text-muted: oklch(55% 0.02 260);
  --color-text-faint: oklch(50% 0.02 260);

  --color-primary: oklch(20% 0 0);
  --color-primary-text: white;

  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-faint: rgba(0, 0, 0, 0.06);
  --color-border-dashed: rgba(0, 0, 0, 0.12);

  --color-surface-glass: rgba(255, 255, 255, 0.65);
  --color-surface-glass-strong: rgba(255, 255, 255, 0.75);
  --color-surface-glass-border: rgba(255, 255, 255, 0.8);
  --color-surface-input: oklch(97% 0.01 260);
  --color-surface-pill: oklch(93% 0.03 260);
  --color-pill-text: oklch(40% 0.03 260);

  --shadow-card: 0 12px 30px -16px rgba(60, 40, 120, 0.2);
  --shadow-card-lg: 0 20px 60px -20px rgba(60, 40, 120, 0.25);

  --brand-gradient: linear-gradient(135deg, oklch(75% 0.15 220), oklch(55% 0.18 290));
  --page-background: radial-gradient(1200px 800px at 10% 0%, oklch(93% 0.05 210) 0%, transparent 55%),
    radial-gradient(1000px 700px at 90% 10%, oklch(92% 0.06 290) 0%, transparent 55%),
    radial-gradient(1400px 900px at 50% 100%, oklch(95% 0.04 250) 0%, transparent 60%), oklch(97% 0.01 250);

  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --radius-pill: 999px;

  /* Status colors: SUCCESS/live (green), BUILDING+DEPLOYING/building (amber),
     QUEUED+ROLLED_BACK/idle (gray), FAILED (red - not in the mockup, added
     to match the same oklch system). */
  --status-success-bg: oklch(88% 0.11 150);
  --status-success-fg: oklch(30% 0.09 150);
  --status-success-dot: oklch(45% 0.15 150);

  --status-progress-bg: oklch(90% 0.11 95);
  --status-progress-fg: oklch(38% 0.09 85);
  --status-progress-dot: oklch(60% 0.15 85);

  --status-neutral-bg: oklch(93% 0.01 260);
  --status-neutral-fg: oklch(45% 0.02 260);
  --status-neutral-dot: oklch(65% 0.01 260);

  --status-failed-bg: oklch(88% 0.12 25);
  --status-failed-fg: oklch(35% 0.15 25);
  --status-failed-dot: oklch(55% 0.18 25);
}