/* ═══════════════════════════════════════════════════════════════════
   M3 Expressive — Singapore AI Theme (Brilliant Blues & Vibrant Cyan)
   Reference: singapore-ai-strategy-infographics.html
   Palette: Slate-50/900 Backgrounds, Cyan-500/Blue-600 Accents
   Theme: Default (Light - Slate) | Dark (Deep Blue/Slate)
   ═══════════════════════════════════════════════════════════════════ */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ═══ LIGHT THEME (Default - Slate/Cyan) ═══ */
:root {
  /* Primary — Vibrant Blue/Cyan Gradient Feel */
  --md-sys-color-primary: #0284c7; /* Sky-600 */
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e0f2fe; /* Sky-100 */
  --md-sys-color-on-primary-container: #0c4a6e; /* Sky-900 */

  /* Secondary — Teal/Green for Data/Success */
  --md-sys-color-secondary: #0d9488; /* Teal-600 */
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #ccfbf1; /* Teal-100 */
  --md-sys-color-on-secondary-container: #115e59; /* Teal-800 */

  /* Tertiary — Indigo/Purple for Strategic depth */
  --md-sys-color-tertiary: #6366f1; /* Indigo-500 */
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #e0e7ff; /* Indigo-100 */
  --md-sys-color-on-tertiary-container: #312e81; /* Indigo-900 */

  /* Error */
  --md-sys-color-error: #ef4444; /* Red-500 */
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #fee2e2; /* Red-100 */
  --md-sys-color-on-error-container: #7f1d1d; /* Red-900 */

  /* Surface — Slate-50 Base */
  --md-sys-color-surface: #f8fafc; /* Slate-50 */
  --md-sys-color-on-surface: #0f172a; /* Slate-900 */
  --md-sys-color-surface-variant: #f1f5f9; /* Slate-100 */
  --md-sys-color-on-surface-variant: #64748b; /* Slate-500 */
  --md-sys-color-surface-dim: #e2e8f0; /* Slate-200 */
  --md-sys-color-surface-bright: #ffffff; /* White */
  
  /* Container Levels */
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f8fafc; /* Slate-50 */
  --md-sys-color-surface-container: #f1f5f9; /* Slate-100 */
  --md-sys-color-surface-container-high: #e2e8f0; /* Slate-200 */
  --md-sys-color-surface-container-highest: #cbd5e1; /* Slate-300 */

  /* Outline */
  --md-sys-color-outline: #94a3b8; /* Slate-400 */
  --md-sys-color-outline-variant: #cbd5e1; /* Slate-300 */

  /* Text Variants */
  --md-sys-color-on-surface-secondary: #475569; /* Slate-600 */
  --md-sys-color-on-surface-tertiary: #64748b; /* Slate-500 */

  /* Inverse */
  --md-sys-color-inverse-surface: #0f172a; /* Slate-900 */
  --md-sys-color-inverse-on-surface: #f1f5f9; /* Slate-100 */
  --md-sys-color-inverse-primary: #38bdf8; /* Sky-400 */

  /* Scrim / Shadow */
  --md-sys-color-scrim: rgba(15, 23, 42, 0.5); /* Slate-900 @ 50% */
  --md-sys-color-shadow: rgba(15, 23, 42, 0.1); /* Slate-900 @ 10% */

  /* Glassmorphism Variables */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-blur: 12px;
  --glass-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

  /* Brand Accents */
  --md-sys-color-accent-blue: #3b82f6; /* Blue-500 */
  --md-sys-color-accent-cyan: #06b6d4; /* Cyan-500 */
  --md-sys-color-accent-teal: #14b8a6; /* Teal-500 */
  --md-sys-color-accent-indigo: #6366f1; /* Indigo-500 */
  --md-sys-color-accent-rose: #f43f5e; /* Rose-500 */
  --md-sys-color-accent-amber: #f59e0b; /* Amber-500 */

  /* Typography Scale */
  --md-sys-typescale-display-large-size: 3.75rem;
  --md-sys-typescale-display-large-line-height: 4.5rem;
  --md-sys-typescale-display-large-weight: 700;
  
  --md-sys-typescale-display-medium-size: 3rem;
  --md-sys-typescale-display-medium-line-height: 3.5rem;
  
  --md-sys-typescale-display-small-size: 2.25rem;
  --md-sys-typescale-display-small-line-height: 2.75rem;
  
  --md-sys-typescale-headline-large-size: 2rem;
  --md-sys-typescale-headline-large-line-height: 2.5rem;
  
  --md-sys-typescale-headline-medium-size: 1.75rem;
  --md-sys-typescale-headline-medium-line-height: 2.25rem;
  
  --md-sys-typescale-headline-small-size: 1.5rem;
  --md-sys-typescale-headline-small-line-height: 2rem;
  
  --md-sys-typescale-title-large-size: 1.375rem;
  --md-sys-typescale-title-large-line-height: 1.75rem;
  
  --md-sys-typescale-title-medium-size: 1.125rem;
  --md-sys-typescale-title-medium-line-height: 1.5rem;
  
  --md-sys-typescale-title-small-size: 1rem;
  --md-sys-typescale-title-small-line-height: 1.5rem;
  
  --md-sys-typescale-body-large-size: 1.125rem; /* 18px base for readability */
  --md-sys-typescale-body-large-line-height: 1.75rem;
  
  --md-sys-typescale-body-medium-size: 1rem;
  --md-sys-typescale-body-medium-line-height: 1.5rem;
  
  --md-sys-typescale-body-small-size: 0.875rem;
  --md-sys-typescale-body-small-line-height: 1.25rem;
  
  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-large-line-height: 1.25rem;
  
  --md-sys-typescale-label-medium-size: 0.75rem;
  --md-sys-typescale-label-medium-line-height: 1rem;
  
  --md-sys-typescale-label-small-size: 0.6875rem;
  --md-sys-typescale-label-small-line-height: 1rem;

  /* Shape Scale */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 24px;
  --md-sys-shape-corner-full: 9999px;

  /* Motion */
  --md-sys-motion-duration-short: 200ms;
  --md-sys-motion-duration-medium: 400ms;
  --md-sys-motion-duration-long: 600ms;
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
}

/* ═══ DARK THEME (Deep Blue/Slate) ═══ */
[data-theme="dark"] {
  /* Primary */
  --md-sys-color-primary: #38bdf8; /* Sky-400 */
  --md-sys-color-on-primary: #0c4a6e; /* Sky-900 */
  --md-sys-color-primary-container: #075985; /* Sky-800 */
  --md-sys-color-on-primary-container: #e0f2fe; /* Sky-100 */

  /* Secondary */
  --md-sys-color-secondary: #2dd4bf; /* Teal-400 */
  --md-sys-color-on-secondary: #134e4a; /* Teal-900 */
  --md-sys-color-secondary-container: #115e59; /* Teal-800 */
  --md-sys-color-on-secondary-container: #ccfbf1; /* Teal-100 */

  /* Tertiary */
  --md-sys-color-tertiary: #818cf8; /* Indigo-400 */
  --md-sys-color-on-tertiary: #312e81; /* Indigo-900 */
  --md-sys-color-tertiary-container: #3730a3; /* Indigo-800 */
  --md-sys-color-on-tertiary-container: #e0e7ff; /* Indigo-100 */

  /* Error */
  --md-sys-color-error: #f87171; /* Red-400 */
  --md-sys-color-on-error: #450a0a; /* Red-950 */
  --md-sys-color-error-container: #991b1b; /* Red-800 */
  --md-sys-color-on-error-container: #fee2e2; /* Red-100 */

  /* Surface — Slate-900 Base */
  --md-sys-color-surface: #0f172a; /* Slate-900 */
  --md-sys-color-on-surface: #f8fafc; /* Slate-50 */
  --md-sys-color-surface-variant: #1e293b; /* Slate-800 */
  --md-sys-color-on-surface-variant: #94a3b8; /* Slate-400 */
  --md-sys-color-surface-dim: #020617; /* Slate-950 */
  --md-sys-color-surface-bright: #1e293b; /* Slate-800 */
  
  /* Container Levels */
  --md-sys-color-surface-container-lowest: #020617; /* Slate-950 */
  --md-sys-color-surface-container-low: #1e293b; /* Slate-800 */
  --md-sys-color-surface-container: #334155; /* Slate-700 */
  --md-sys-color-surface-container-high: #475569; /* Slate-600 */
  --md-sys-color-surface-container-highest: #64748b; /* Slate-500 */

  /* Outline */
  --md-sys-color-outline: #64748b; /* Slate-500 */
  --md-sys-color-outline-variant: #475569; /* Slate-600 */

  /* Text Variants */
  --md-sys-color-on-surface-secondary: #cbd5e1; /* Slate-300 */
  --md-sys-color-on-surface-tertiary: #94a3b8; /* Slate-400 */

  /* Inverse */
  --md-sys-color-inverse-surface: #f8fafc; /* Slate-50 */
  --md-sys-color-inverse-on-surface: #0f172a; /* Slate-900 */
  --md-sys-color-inverse-primary: #0284c7; /* Sky-600 */

  /* Scrim / Shadow */
  --md-sys-color-scrim: rgba(0, 0, 0, 0.6);
  --md-sys-color-shadow: rgba(0, 0, 0, 0.4);

  /* Glassmorphism Variables */
  --glass-bg: rgba(15, 23, 42, 0.6); /* Slate-900 @ 60% */
  --glass-border: rgba(148, 163, 184, 0.1); /* Slate-400 @ 10% */
  --glass-blur: 16px;
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  /* Brand Accents */
  --md-sys-color-accent-blue: #60a5fa; /* Blue-400 */
  --md-sys-color-accent-cyan: #22d3ee; /* Cyan-400 */
  --md-sys-color-accent-teal: #2dd4bf; /* Teal-400 */
  --md-sys-color-accent-indigo: #818cf8; /* Indigo-400 */
  --md-sys-color-accent-rose: #fb7185; /* Rose-400 */
  --md-sys-color-accent-amber: #fbbf24; /* Amber-400 */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --md-sys-motion-duration-short: 0.01ms;
    --md-sys-motion-duration-medium: 0.01ms;
    --md-sys-motion-duration-long: 0.01ms;
  }
}