:root {
  color-scheme: dark;

  --color-bg: #06101f;
  --color-bg-elevated: #0b1728;
  --color-surface: rgb(16 28 49 / 0.88);
  --color-surface-strong: rgb(19 34 58 / 0.96);
  --color-surface-soft: rgb(255 255 255 / 0.06);
  --color-border: rgb(255 255 255 / 0.1);
  --color-border-strong: rgb(255 255 255 / 0.18);

  --color-text: #f8fafc;
  --color-text-soft: #cbd5e1;
  --color-text-muted: #94a3b8;

  --color-primary: #35e27c;
  --color-primary-strong: #22c55e;
  --color-secondary: #4cc9ff;
  --color-warning: #ffd166;
  --color-danger: #fb7185;
  --color-purple: #a78bfa;

  --gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  --gradient-surface: linear-gradient(135deg, rgb(21 41 68 / 0.95), rgb(16 28 49 / 0.86));
  --gradient-bg:
    radial-gradient(circle at 8% 0%, rgb(53 226 124 / 0.2), transparent 34rem),
    radial-gradient(circle at 92% 6%, rgb(76 201 255 / 0.2), transparent 31rem),
    radial-gradient(circle at 50% 100%, rgb(167 139 250 / 0.13), transparent 28rem),
    var(--color-bg);

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.8rem + 0.08vw, 0.88rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.18vw, 1rem);
  --step-1: clamp(1.1rem, 1.02rem + 0.35vw, 1.25rem);
  --step-2: clamp(1.35rem, 1.18rem + 0.7vw, 1.7rem);
  --step-3: clamp(1.8rem, 1.45rem + 1.4vw, 2.55rem);
  --step-4: clamp(2.4rem, 1.72rem + 3.2vw, 5.4rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.35rem;
  --radius-xl: 1.75rem;
  --radius-full: 999px;

  --shadow-soft: 0 14px 40px rgb(0 0 0 / 0.24);
  --shadow-card: 0 22px 80px rgb(0 0 0 / 0.45);
  --focus-ring: 0 0 0 3px rgb(76 201 255 / 0.35);

  --sidebar-width: 292px;
  --topbar-height: 76px;
  --bottom-nav-height: 72px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --duration-fast: 140ms;
  --duration: 220ms;
}

[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f6f8fb;
  --color-bg-elevated: #ffffff;
  --color-surface: rgb(255 255 255 / 0.9);
  --color-surface-strong: rgb(255 255 255 / 0.98);
  --color-surface-soft: rgb(2 6 23 / 0.04);
  --color-border: rgb(2 6 23 / 0.1);
  --color-border-strong: rgb(2 6 23 / 0.16);
  --color-text: #0f172a;
  --color-text-soft: #334155;
  --color-text-muted: #64748b;
  --gradient-bg:
    radial-gradient(circle at 8% 0%, rgb(53 226 124 / 0.18), transparent 34rem),
    radial-gradient(circle at 92% 6%, rgb(76 201 255 / 0.18), transparent 31rem),
    #f6f8fb;
}