/* ============================================
   StressAId — Design Tokens
   All brand colors, fonts, spacing, shadows
   Admin-editable via sai_site_config (overridden by sai_cms.js)
   ============================================ */

:root {
  /* --- Dark Theme Base --- */
  --sai-bg-darkest: #0A1628;
  --sai-bg-dark: #0F1D32;
  --sai-bg-card: #152238;
  --sai-bg-elevated: #1A2942;
  --sai-bg-hover: #1E3050;
  --sai-bg-input: #152238;
  --sai-bg-overlay: rgba(10, 22, 40, 0.85);

  /* --- Teal Palette --- */
  --sai-teal-darkest: #0D3D38;
  --sai-teal-dark: #0D9488;
  --sai-teal-primary: #14B8A6;
  --sai-teal-light: #5EEAD4;
  --sai-teal-muted: rgba(20, 184, 166, 0.15);

  /* --- Gold Accent --- */
  --sai-gold-dark: #B8962E;
  --sai-gold-primary: #D4A853;
  --sai-gold-light: #E8C76A;
  --sai-gold-muted: rgba(212, 168, 83, 0.15);

  /* --- Blue Palette --- */
  --sai-blue-dark: #1D4ED8;
  --sai-blue-primary: #2563EB;
  --sai-blue-light: #60A5FA;
  --sai-blue-muted: rgba(37, 99, 235, 0.15);

  /* --- Functional --- */
  --sai-white: #FFFFFF;
  --sai-text-primary: #F1F5F9;
  --sai-text-secondary: #94A3B8;
  --sai-text-muted: #64748B;
  --sai-text-disabled: #475569;
  --sai-border: rgba(148, 163, 184, 0.12);
  --sai-border-strong: rgba(148, 163, 184, 0.25);
  --sai-danger: #EF4444;
  --sai-danger-muted: rgba(239, 68, 68, 0.15);
  --sai-success: #10B981;
  --sai-success-muted: rgba(16, 185, 129, 0.15);
  --sai-warning: #F59E0B;
  --sai-warning-muted: rgba(245, 158, 11, 0.15);

  /* --- Typography --- */
  --sai-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --sai-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --sai-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* --- Font Sizes (clamp for responsiveness) --- */
  --sai-text-xs: clamp(0.625rem, 0.6rem + 0.13vw, 0.75rem);
  --sai-text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --sai-text-base: clamp(0.875rem, 0.8rem + 0.38vw, 1rem);
  --sai-text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --sai-text-xl: clamp(1.125rem, 1rem + 0.63vw, 1.25rem);
  --sai-text-2xl: clamp(1.25rem, 1rem + 1.25vw, 1.5rem);
  --sai-text-3xl: clamp(1.5rem, 1.1rem + 2vw, 1.875rem);
  --sai-text-4xl: clamp(1.75rem, 1.2rem + 2.75vw, 2.25rem);
  --sai-text-5xl: clamp(2rem, 1.3rem + 3.5vw, 3rem);
  --sai-text-hero: clamp(2.25rem, 1.5rem + 3.75vw, 3.75rem);

  /* --- Line Heights --- */
  --sai-leading-tight: 1.2;
  --sai-leading-normal: 1.5;
  --sai-leading-relaxed: 1.65;

  /* --- Spacing --- */
  --sai-space-2xs: 0.125rem;
  --sai-space-xs: 0.25rem;
  --sai-space-sm: 0.5rem;
  --sai-space-md: 1rem;
  --sai-space-lg: 1.5rem;
  --sai-space-xl: 2rem;
  --sai-space-2xl: 3rem;
  --sai-space-3xl: 4rem;
  --sai-space-4xl: 6rem;

  /* --- Border Radius --- */
  --sai-radius-sm: 0.375rem;
  --sai-radius-md: 0.5rem;
  --sai-radius-lg: 0.75rem;
  --sai-radius-xl: 1rem;
  --sai-radius-2xl: 1.25rem;
  --sai-radius-full: 9999px;

  /* --- Shadows --- */
  --sai-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --sai-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
  --sai-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --sai-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  --sai-shadow-glow-teal: 0 0 20px rgba(20, 184, 166, 0.3);
  --sai-shadow-glow-gold: 0 0 20px rgba(212, 168, 83, 0.3);

  /* --- Gradients --- */
  --sai-gradient-bg: linear-gradient(180deg, #0A1628 0%, #0F1D32 50%, #152238 100%);
  --sai-gradient-teal: linear-gradient(135deg, #0D9488 0%, #14B8A6 50%, #5EEAD4 100%);
  --sai-gradient-gold: linear-gradient(135deg, #B8962E 0%, #D4A853 50%, #E8C76A 100%);
  --sai-gradient-hero: linear-gradient(135deg, #0A1628 0%, #0D3D38 40%, #152238 100%);
  --sai-gradient-card: linear-gradient(180deg, var(--sai-bg-card) 0%, var(--sai-bg-elevated) 100%);
  --sai-gradient-fab: linear-gradient(135deg, #14B8A6 0%, #2563EB 100%);

  /* --- Transitions --- */
  --sai-ease-fast: 150ms ease;
  --sai-ease-normal: 250ms ease;
  --sai-ease-slow: 400ms ease;
  --sai-ease-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Container --- */
  --sai-container-max: 1440px;
  --sai-container-padding: clamp(1rem, 2vw, 2rem);

  /* --- Z-Index Layers --- */
  --sai-z-base: 1;
  --sai-z-dropdown: 100;
  --sai-z-sticky: 200;
  --sai-z-sidebar: 300;
  --sai-z-overlay: 400;
  --sai-z-modal: 500;
  --sai-z-toast: 600;
  --sai-z-chat-widget: 700;

  /* --- Sidebar --- */
  --sai-sidebar-width: 280px;
  --sai-sidebar-collapsed: 72px;

  /* --- Bottom Nav (End User) --- */
  --sai-bottomnav-height: 64px;
  --sai-bottomnav-safe: env(safe-area-inset-bottom, 0px);
}