/* Design tokens and responsive breakpoints */
:root{
  /* Color system */
  --bg: #ffffff;
  --surface: #f8fafb;
  --muted: #6b7280;
  --text: #0f172a;
  --primary: #0b6e3a;
  --primary-600: #0a5e33;
  --accent: #06b6d4;
  --danger: #ef4444;

  /* Common accents used across older/newer components */
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-danger: var(--danger);

  /* Semantic */
  --card-bg: #ffffff;
  --glass: rgba(255,255,255,0.6);

  /* Spacing scale */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 6px 18px rgba(2,6,23,0.08);
  --shadow-lg: 0 18px 50px rgba(2,6,23,0.12);

  /* Typography scale */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --type-xs: 12px;
  --type-sm: 14px;
  --type-md: 16px;
  --type-lg: 20px;
  --type-xl: 24px;
  --type-2xl: 32px;

  /* Breakpoints */
  --bp-xs: 320px;
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #06121b;
    --surface: #071022;
    --muted: #9aa4b2;
    --text: #e6eef6;
    --card-bg: #07202b;
  }
}

/* Explicit dark mode (class-based for forced dark regardless of system) */
.theme-dark{
  --bg: #06121b;
  --surface: #071022;
  --muted: #9aa4b2;
  --text: #e6eef6;
  --card-bg: #07202b;
  --primary: #22d3ee;
  --primary-600: #06b6d4;
  --accent: #22d3ee;
  --danger: #f87171;

  --accent-success: #34d399;
  --accent-warning: #fbbf24;
  --accent-danger: var(--danger);
  --glass: rgba(230,238,246,0.1);
}

/* Explicit light mode */
.theme-light{
  --bg: #ffffff;
  --surface: #f8fafb;
  --muted: #6b7280;
  --text: #0f172a;
  --card-bg: #ffffff;
  --primary: #0b6e3a;
  --primary-600: #0a5e33;
  --accent: #06b6d4;
  --danger: #ef4444;
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-danger: var(--danger);
  --glass: rgba(255,255,255,0.6);
}