:root {
  color-scheme: light;

  --app-bg: #f6f8fb;
  --app-surface: #ffffff;
  --app-surface-raised: #f8fafc;
  --app-surface-muted: #f1f5f9;

  --app-text: #0f172a;
  --app-text-muted: #475569;
  --app-text-soft: #94a3b8;

  --app-border: #e2e8f0;
  --app-border-strong: #cbd5e1;

  --app-accent: #10b981;
  --app-accent-strong: #059669;
  --app-accent-soft: #ecfdf5;

  --app-warning: #f59e0b;
  --app-warning-soft: #fef3c7;
  --app-danger: #ef4444;
  --app-danger-soft: #fee2e2;
  --app-info: #0ea5e9;
  --app-info-soft: #eff6ff;

  --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --app-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07);
  --app-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.1);

  --app-radius-xs: 0.4rem;
  --app-radius-sm: 0.5rem;
  --app-radius-md: 0.65rem;
  --app-radius-lg: 0.9rem;
  --app-radius-xl: 1rem;

  --app-space-1: 0.25rem;
  --app-space-2: 0.5rem;
  --app-space-3: 0.75rem;
  --app-space-4: 1rem;
  --app-space-5: 1.25rem;
  --app-space-6: 1.5rem;

  --app-font-sans: 'Inter', sans-serif;
}

[data-theme='dark'] {
  color-scheme: dark;

  --app-bg: #0f172a;
  --app-surface: #111827;
  --app-surface-raised: #1e293b;
  --app-surface-muted: #1f2937;

  --app-text: #e5eef9;
  --app-text-muted: #cbd5e1;
  --app-text-soft: #94a3b8;

  --app-border: #334155;
  --app-border-strong: #475569;

  --app-accent: #34d399;
  --app-accent-strong: #10b981;
  --app-accent-soft: rgba(52, 211, 153, 0.12);

  --app-warning: #fbbf24;
  --app-warning-soft: rgba(251, 191, 36, 0.12);
  --app-danger: #f87171;
  --app-danger-soft: rgba(248, 113, 113, 0.12);
  --app-info: #38bdf8;
  --app-info-soft: rgba(56, 189, 248, 0.12);

  --app-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.35);
  --app-shadow-md: 0 8px 24px rgba(2, 6, 23, 0.35);
  --app-shadow-lg: 0 20px 40px rgba(2, 6, 23, 0.4);
}