/* ==========================================================================
   SpoonFlow Design Tokens & CSS Variables
   WCAG AAA Compliant Accessibility Theming
   ========================================================================== */

:root {
  /* Color Palette - Default Calm Dark Mode */
  --bg-primary: #0b0f19;
  --bg-secondary: #111827;
  --bg-surface: #1e293b;
  --bg-surface-elevated: #283548;
  --bg-surface-glass: rgba(30, 41, 59, 0.72);
  --bg-input: #151e2e;
  --bg-hover: rgba(255, 255, 255, 0.05);

  /* Borders */
  --border-subtle: #1e293b;
  --border-medium: #334155;
  --border-focus: #818cf8;

  /* Typography Colors */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0b0f19;

  /* Energy Accent Colors */
  --spoon-emerald: #10b981;
  --spoon-emerald-glow: rgba(16, 185, 129, 0.28);
  --spoon-lavender: #818cf8;
  --spoon-lavender-glow: rgba(129, 140, 248, 0.28);
  --spoon-amber: #f59e0b;
  --spoon-amber-glow: rgba(245, 158, 11, 0.28);
  --spoon-rose: #f43f5e;
  --spoon-rose-glow: rgba(244, 63, 94, 0.28);
  --spoon-cyan: #06b6d4;
  --spoon-cyan-glow: rgba(6, 182, 212, 0.25);

  /* Cognitive Drain Indicators */
  --drain-cognitive: #818cf8;
  --drain-social: #f59e0b;
  --drain-micro: #06b6d4;
  --drain-restorative: #10b981;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-dyslexic: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  --font-current: var(--font-sans);
  --font-scale: 1;

  /* Type Scale */
  --text-xs: calc(0.75rem * var(--font-scale));
  --text-sm: calc(0.875rem * var(--font-scale));
  --text-base: calc(1rem * var(--font-scale));
  --text-lg: calc(1.125rem * var(--font-scale));
  --text-xl: calc(1.25rem * var(--font-scale));
  --text-2xl: calc(1.5rem * var(--font-scale));
  --text-3xl: calc(1.875rem * var(--font-scale));
  --text-4xl: calc(2.25rem * var(--font-scale));

  /* Elevation & Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
  --shadow-glow-lavender: 0 0 25px rgba(129, 140, 248, 0.3);
  --shadow-glow-emerald: 0 0 25px rgba(16, 185, 129, 0.3);
  --shadow-glow-amber: 0 0 25px rgba(245, 158, 11, 0.3);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   High-Contrast Mode (WCAG AAA 7:1 Contrast Compliance)
   ========================================================================== */
body.theme-high-contrast {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-surface: #141414;
  --bg-surface-elevated: #1e1e1e;
  --bg-surface-glass: #141414;
  --bg-input: #000000;
  --border-subtle: #555555;
  --border-medium: #ffffff;
  --border-focus: #ffff00;
  --text-primary: #ffffff;
  --text-secondary: #f0f0f0;
  --text-muted: #d0d0d0;
  --spoon-emerald: #00ff66;
  --spoon-lavender: #bb99ff;
  --spoon-amber: #ffcc00;
  --spoon-rose: #ff4466;
  --spoon-cyan: #00ffff;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

/* ==========================================================================
   Dyslexia-Friendly Mode
   ========================================================================== */
body.theme-dyslexic {
  --font-current: var(--font-dyslexic);
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  line-height: 1.75;
}

/* ==========================================================================
   Reduced Motion Mode
   ========================================================================== */
body.theme-reduced-motion *,
body.theme-reduced-motion *::before,
body.theme-reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}