/**
 * ========================================================================
 * SPARKUS 2026 DESIGN SYSTEM - DESIGN TOKENS
 * ========================================================================
 * 
 * Single source of truth for all design tokens used across the Platform.
 * 
 * CRITICAL: Some tokens are OVERRIDDEN by BrandingService per-program.
 * See "Branding Overridable" section for which tokens can be customized.
 * 
 * FILE: sparkus-tokens.css
 * CREATED: December 19, 2025
 * SPEC PROJECT: SP-Design-System-Production
 * ========================================================================
 */

/* ========================================================================
   LIGHT MODE - DEFAULT TOKENS
   ======================================================================== */
:root {
  /* ===================================================================
     BLUE PALETTE (Design System Foundation)
     These replace grey for a warmer, more professional look
     =================================================================== */
  --sp-blue-50: #f0f5fa;
  --sp-blue-100: #e1ebf4;
  --sp-blue-200: #c3d7e9;
  --sp-blue-300: #94b8d4;
  --sp-blue-400: #5e92b8;
  --sp-blue-500: #3d6f94;   /* ⚠️ Branding Overridable (SecondaryGradientEnd) */
  --sp-blue-600: #2d5573;
  --sp-blue-700: #1e3a52;
  --sp-blue-800: #0f2438;   /* ⚠️ Branding Overridable (SecondaryGradientStart) */
  --sp-blue-900: #041624;
  
  /* ===================================================================
     SPARKUS RED (Brand Accent)
     ⚠️ These are BRANDING OVERRIDABLE by BrandingService
     =================================================================== */
  --sp-red: #d92b31;        /* ⚠️ Branding Overridable (PrimaryGradientStart) */
  --sp-red-light: #f54725;  /* ⚠️ Branding Overridable (PrimaryGradientEnd) */
  --sp-red-lighter: #fef2f2;
  
  /* ===================================================================
     SEMANTIC COLORS
     =================================================================== */
  --sp-success: #10b981;
  --sp-success-light: #d1fae5;
  --sp-warning: #f59e0b;
  --sp-warning-light: #fef3c7;
  --sp-danger: #ef4444;
  --sp-danger-light: #fee2e2;
  --sp-info: var(--sp-blue-500);
  --sp-info-light: var(--sp-blue-100);
  
  /* ===================================================================
     MODULE-SPECIFIC COLORS
     For exercise module type styling (reflection, AI, goal, etc.)
     =================================================================== */
  --sp-module-reflection-bg: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  --sp-module-reflection-text: #92400e;
  --sp-module-ai-bg: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  --sp-module-ai-accent: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --sp-module-ai-text: #5b21b6;
  --sp-module-goal-bg: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  --sp-module-goal-text: #1e40af;
  --sp-module-carried-bg: #f0fdf4;
  --sp-module-carried-border: #86efac;
  --sp-module-carried-text: #15803d;
  --sp-module-audio-bg: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  --sp-module-audio-text: #831843;
  --sp-module-link-bg: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --sp-module-video-bg: #0f172a;
  
  /* ===================================================================
     SURFACES
     =================================================================== */
  --sp-white: #ffffff;
  --sp-body-bg: var(--sp-blue-50);
  --sp-card-bg: var(--sp-white);
  --sp-card-border: rgba(30, 58, 82, 0.08);
  
  /* ===================================================================
     TEXT COLORS
     Note: --sp-text-primary is hardcoded to avoid branding conflicts
     =================================================================== */
  --sp-text-primary: #0f2438;
  --sp-text-secondary: var(--sp-blue-600);
  --sp-text-muted: var(--sp-blue-400);
  --sp-text-light: var(--sp-blue-300);
  --sp-text-on-primary: #ffffff;
  --sp-text-on-dark: #ffffff;
  
  /* ===================================================================
     GRADIENTS
     ⚠️ Primary/Secondary gradients are BRANDING OVERRIDABLE
     =================================================================== */
  --sp-gradient-primary: linear-gradient(75deg, #d92b31, #f54725);   /* ⚠️ Overridable */
  --sp-gradient-secondary: linear-gradient(45deg, #0f2438, #3d6f94); /* ⚠️ Overridable */
  --sp-gradient-light: linear-gradient(180deg, var(--sp-blue-50) 0%, var(--sp-white) 100%);
  --sp-gradient-subtle: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.02) 100%);
  
  /* ===================================================================
     SPACING (4px Baseline Grid)
     =================================================================== */
  --sp-space-0: 0;
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 20px;
  --sp-space-6: 24px;
  --sp-space-7: 28px;
  --sp-space-8: 32px;
  --sp-space-9: 36px;
  --sp-space-10: 40px;
  --sp-space-12: 48px;
  --sp-space-16: 64px;
  --sp-space-20: 80px;
  --sp-space-24: 96px;
  
  /* ===================================================================
     BORDER RADIUS
     Minimal radius for clean, professional look
     =================================================================== */
  --sp-radius-none: 0;
  --sp-radius-sm: 2px;
  --sp-radius-md: 4px;
  --sp-radius-lg: 6px;
  --sp-radius-xl: 8px;
  --sp-radius-2xl: 12px;
  --sp-radius-full: 9999px;
  
  /* ===================================================================
     SHADOWS
     Blue-tinted for brand alignment (never pure black)
     =================================================================== */
  --sp-shadow-none: none;
  --sp-shadow-xs: 0 1px 2px rgba(4, 22, 36, 0.04);
  --sp-shadow-sm: 0 1px 3px rgba(4, 22, 36, 0.06), 0 1px 2px rgba(4, 22, 36, 0.04);
  --sp-shadow-md: 0 4px 8px rgba(4, 22, 36, 0.08), 0 2px 4px rgba(4, 22, 36, 0.04);
  --sp-shadow-lg: 0 12px 24px rgba(4, 22, 36, 0.1), 0 4px 8px rgba(4, 22, 36, 0.04);
  --sp-shadow-xl: 0 20px 40px rgba(4, 22, 36, 0.12), 0 8px 16px rgba(4, 22, 36, 0.06);
  --sp-shadow-card: 0 2px 8px rgba(4, 22, 36, 0.08), 0 1px 2px rgba(4, 22, 36, 0.06);
  --sp-shadow-dropdown: 0 4px 16px rgba(4, 22, 36, 0.12), 0 2px 4px rgba(4, 22, 36, 0.08);
  --sp-shadow-modal: 0 24px 48px rgba(4, 22, 36, 0.16), 0 8px 16px rgba(4, 22, 36, 0.08);
  
  /* ===================================================================
     TYPOGRAPHY
     =================================================================== */
  --sp-font-family-heading: 'Stag', 'Stag Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sp-font-family-body: 'Stag Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sp-font-family-mono: 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
  
  --sp-font-weight-light: 300;
  --sp-font-weight-normal: 400;
  --sp-font-weight-medium: 500;
  --sp-font-weight-semibold: 600;
  --sp-font-weight-bold: 700;
  
  --sp-font-size-xs: 0.75rem;    /* 12px */
  --sp-font-size-sm: 0.875rem;   /* 14px */
  --sp-font-size-base: 1rem;     /* 16px */
  --sp-font-size-lg: 1.125rem;   /* 18px */
  --sp-font-size-xl: 1.25rem;    /* 20px */
  --sp-font-size-2xl: 1.5rem;    /* 24px */
  --sp-font-size-3xl: 1.875rem;  /* 30px */
  --sp-font-size-4xl: 2.25rem;   /* 36px */
  --sp-font-size-5xl: 3rem;      /* 48px */
  
  --sp-line-height-tight: 1.25;
  --sp-line-height-snug: 1.375;
  --sp-line-height-normal: 1.5;
  --sp-line-height-relaxed: 1.625;
  --sp-line-height-loose: 2;
  
  --sp-letter-spacing-tighter: -0.05em;
  --sp-letter-spacing-tight: -0.025em;
  --sp-letter-spacing-normal: 0;
  --sp-letter-spacing-wide: 0.025em;
  --sp-letter-spacing-wider: 0.05em;
  --sp-letter-spacing-widest: 0.1em;
  
  /* ===================================================================
     TRANSITIONS
     =================================================================== */
  --sp-transition-fast: 150ms ease;
  --sp-transition-base: 250ms ease;
  --sp-transition-slow: 350ms ease;
  --sp-transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ===================================================================
     Z-INDEX SCALE
     =================================================================== */
  --sp-z-dropdown: 100;
  --sp-z-sticky: 200;
  --sp-z-fixed: 300;
  --sp-z-drawer: 400;
  --sp-z-modal: 500;
  --sp-z-popover: 600;
  --sp-z-tooltip: 700;
  --sp-z-toast: 800;
  
  /* ===================================================================
     FOCUS RING (Subtle per stakeholder feedback)
     80% of platform is inputs - avoid intimidating UX
     =================================================================== */
  --sp-focus-ring-width: 2px;
  --sp-focus-ring-offset: 2px;
  --sp-focus-ring-color: rgba(61, 111, 148, 0.4); /* Subtle blue, 40% opacity */
  --sp-focus-ring: 0 0 0 var(--sp-focus-ring-width) var(--sp-focus-ring-color);
  
  /* ===================================================================
     LAYOUT
     =================================================================== */
  --sp-content-max-width: 1320px;
  --sp-content-padding: 24px;
  --sp-sidebar-width: 280px;
  --sp-sidebar-collapsed-width: 72px;
  --sp-navbar-height: 64px;
  --sp-footer-height: 48px;
  
  /* ===================================================================
     BRANDING SERVICE COMPATIBILITY
     These match BrandingService.BuildBaseScss() output
     =================================================================== */
  --sp-step-header-gradient: var(--sp-gradient-primary);
  --sp-step-header-diamond: var(--sp-red-light);
  --sp-accent: var(--sp-red);
  
  /* Legacy Bootstrap compatibility */
  --bs-primary: var(--sp-red);
  --bs-secondary: var(--sp-blue-800);
  --bs-accent: var(--sp-red-light);
  
  /* Color scheme for browser UI */
  color-scheme: light;
}

/* ========================================================================
   DARK MODE TOKENS
   Applied when .dark or .dark-mode class is on html/body
   Also supports data-theme="dark" and BrandingService's .dark-mode class
   ======================================================================== */
.dark,
.dark-mode,
[data-theme="dark"] {
  /* ===================================================================
     BLUE PALETTE (Inverted for Dark)
     =================================================================== */
  --sp-blue-50: #0a1929;
  --sp-blue-100: #0f2438;
  --sp-blue-200: #1e3a52;
  --sp-blue-300: #2d5573;
  --sp-blue-400: #3d6f94;
  --sp-blue-500: #5e92b8;
  --sp-blue-600: #94b8d4;
  --sp-blue-700: #c3d7e9;
  --sp-blue-800: #e1ebf4;
  --sp-blue-900: #f0f5fa;
  
  /* ===================================================================
     SPARKUS RED (Brightened for dark background)
     =================================================================== */
  --sp-red: #ef4444;
  --sp-red-light: #f87171;
  --sp-red-lighter: rgba(239, 68, 68, 0.15);
  
  /* ===================================================================
     SEMANTIC COLORS (Dark Mode)
     =================================================================== */
  --sp-success: #34d399;
  --sp-success-light: rgba(52, 211, 153, 0.15);
  --sp-warning: #fbbf24;
  --sp-warning-light: rgba(251, 191, 36, 0.15);
  --sp-danger: #f87171;
  --sp-danger-light: rgba(248, 113, 113, 0.15);
  --sp-info: #60a5fa;
  --sp-info-light: rgba(96, 165, 250, 0.15);
  
  /* ===================================================================
     MODULE-SPECIFIC COLORS (Dark Mode)
     =================================================================== */
  --sp-module-reflection-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.2) 100%);
  --sp-module-reflection-text: #fcd34d;
  --sp-module-ai-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.2) 100%);
  --sp-module-ai-accent: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  --sp-module-ai-text: #c4b5fd;
  --sp-module-goal-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.2) 100%);
  --sp-module-goal-text: #93c5fd;
  --sp-module-carried-bg: rgba(52, 211, 153, 0.1);
  --sp-module-carried-border: rgba(52, 211, 153, 0.4);
  --sp-module-carried-text: #6ee7b7;
  --sp-module-audio-bg: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(219, 39, 119, 0.2) 100%);
  --sp-module-audio-text: #f9a8d4;
  --sp-module-link-bg: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --sp-module-video-bg: #1e293b;
  
  /* ===================================================================
     SURFACES (Dark Mode)
     =================================================================== */
  --sp-white: #1e293b;
  --sp-body-bg: #0a1929;
  --sp-card-bg: #1e293b;
  --sp-card-border: rgba(148, 184, 212, 0.12);
  
  /* ===================================================================
     TEXT (Dark Mode)
     =================================================================== */
  --sp-text-primary: #e1ebf4;
  --sp-text-secondary: #94b8d4;
  --sp-text-muted: #5e92b8;
  --sp-text-light: #3d6f94;
  --sp-text-on-primary: #ffffff;
  --sp-text-on-dark: #ffffff;
  
  /* ===================================================================
     GRADIENTS (Dark Mode)
     =================================================================== */
  --sp-gradient-primary: linear-gradient(75deg, #ef4444, #f87171);
  --sp-gradient-secondary: linear-gradient(45deg, #1e293b, #0f2438);
  --sp-gradient-light: linear-gradient(180deg, #0a1929 0%, #1e293b 100%);
  --sp-gradient-subtle: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.02) 100%);
  
  /* ===================================================================
     SHADOWS (Dark Mode - More subtle)
     =================================================================== */
  --sp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --sp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2);
  --sp-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --sp-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.2);
  --sp-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.25);
  --sp-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2);
  --sp-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
  --sp-shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.3);
  
  /* ===================================================================
     FOCUS RING (Dark Mode - Slightly brighter)
     =================================================================== */
  --sp-focus-ring-color: rgba(96, 165, 250, 0.5);
  
  /* ===================================================================
     BRANDING SERVICE COMPATIBILITY (Dark Mode)
     These match what BrandingService generates when DarkModeEnabled=true
     =================================================================== */
  --sp-bg-primary: #1a1a2e;
  --sp-bg-secondary: #16213e;
  --sp-bg-card: #1f2937;
  --sp-border-color: #374151;
  
  /* Color scheme for browser UI */
  color-scheme: dark;
}

/* ========================================================================
   MEDIA QUERY: System Dark Mode Preference
   Automatically applies dark mode if no explicit class is set
   ======================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) {
    /* Only apply if user hasn't explicitly chosen light mode */
    /* This allows system preference when no explicit choice */
  }
}

/* ========================================================================
   REDUCED MOTION
   Respect user's motion preferences
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sp-transition-fast: 0ms;
    --sp-transition-base: 0ms;
    --sp-transition-slow: 0ms;
    --sp-transition-smooth: 0ms;
  }
}

/* ========================================================================
   UTILITY CLASSES
   Common utilities that use the token system
   ======================================================================== */

/* Theme transition smoothing */
.sp-theme-transition,
.sp-theme-transition * {
  transition: 
    background-color var(--sp-transition-base),
    border-color var(--sp-transition-base),
    color var(--sp-transition-base),
    fill var(--sp-transition-base),
    stroke var(--sp-transition-base),
    box-shadow var(--sp-transition-base) !important;
}

/* Focus visible ring (subtle per stakeholder feedback) */
.sp-focus-visible:focus-visible {
  outline: none;
  box-shadow: var(--sp-focus-ring);
}

/* Focus ring for inputs (subtle) */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable]:focus-visible {
  outline: none;
  border-color: var(--sp-blue-400);
  box-shadow: 0 0 0 1px var(--sp-blue-400);
}