/* theme.css - centralized design tokens for colors, shadows, and radii */
:root{
  /* Core palette (light) */
  --color-bg: #F6F7FB;
  --color-surface: #FFFFFF;
  --color-text: #0F172A;
  --color-muted: #64748B;
  --color-border: #E6EAF0;
  --color-primary: #2563EB;
  --color-primary-foreground: #FFFFFF;
  --color-primary-hover: #1D4ED8;
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-danger:  #DC2626;
  --shadow: 0 8px 24px rgba(2,6,23,0.08);
  --radius: 12px;
}

/* Dark theme overrides */
:root[data-theme='dark']{
  --color-bg: #0B1220;
  --color-surface: #0F1724;
  --color-text: #E6EEF8;
  --color-muted: #94A3B8;
  --color-border: #1E293B;
  --color-primary: #60A5FA;
  --color-primary-foreground: #0B1220;
  --color-primary-hover: #3B82F6;
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger:  #F87171;
  --shadow: 0 12px 30px rgba(2,6,23,0.6);
  --radius: 12px;
}

/* Utility aliases for backward compatibility */
:root{ --color-surface-variant: var(--color-surface); --radius-md: var(--radius) }

/* Example usage (components should reference these tokens) */
body{ background:var(--color-bg); color:var(--color-text); }
.card{ background:var(--color-surface); border:1px solid var(--color-border); box-shadow:var(--shadow); border-radius:var(--radius) }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
}