/* ========================================
   Tempo Design System - Color Tokens
   5 Themes: Dark Warm, Dark Cool, Light Warm, Light Cool, High Contrast
======================================== */

/* ========================================
   DARK WARM (Default - from Figma JSON)
======================================== */
[data-theme="dark-warm"] {
  /* Primitives */
  --brand-primary: #FFFFFF;
  --brand-secondary: #F0F0F0;
  --brand-tertiary: #E0E0E0;
  --on-brand: #1E1A11;

  /* Surfaces */
  --surface: #1E1A11FF;
  --surface-dim: #15120CFF;
  --surface-bright: #332F26FF;
  --surf-container: #332F26FF;
  --surf-container-lowest: #1A160FFF;
  --surf-container-low: #252118FF;
  --surf-container-high: #47433AFF;
  --surf-container-highest: #5C584FFF;

  /* On Surfaces */
  --on-surface: #EAE8E0FF;
  --on-surface-var-1: #D6D4CCFF;
  --on-surface-var-2: #98968DFF;

  /* Outlines */
  --outline: #858179FF;
  --outline-variant: #5C584FFF;

  /* Inverse */
  --inverse-surface: #EAE8E0FF;
  --inverse-on-surface: #252118FF;

  /* Semantics */
  --error: #E51919FF;
  --warning: #F8C806FF;
  --success: #1FDF66FF;

  /* Text Hierarchy */
  --text-primary: #EAE8E0FF;
  --text-secondary: #D6D4CCFF;
  --text-tertiary: #98968DFF;
  --text-disabled: #5C584FFF;

  /* Glass */
  --glass-bg: rgba(30, 26, 17, 0.6);
  --glass-border: rgba(234, 232, 224, 0.1);
  --glass-blur: 20px;

  /* Avatar Gradient */
  --avatar-gradient-start: #8B5CF6;
  --avatar-gradient-mid: #EC4899;
  --avatar-gradient-end: #F59E0B;
  --avatar-shadow: rgba(139, 92, 246, 0.4);
}

/* ========================================
   DARK COOL (Blue-tinted dark theme)
======================================== */
[data-theme="dark-cool"] {
  /* Primitives */
  --brand-purple: #8B5CF6;
  --on-brand-purple: #2E1065;

  /* Surfaces */
  --surface: #0F172A;
  --surface-dim: #020617;
  --surface-bright: #1E293B;
  --surf-container: #1E293B;
  --surf-container-lowest: #020617;
  --surf-container-low: #0F172A;
  --surf-container-high: #334155;
  --surf-container-highest: #475569;

  /* On Surfaces */
  --on-surface: #F1F5F9;
  --on-surface-var-1: #CBD5E1;
  --on-surface-var-2: #94A3B8;

  /* Outlines */
  --outline: #475569;
  --outline-variant: #334155;

  /* Inverse */
  --inverse-surface: #F1F5F9;
  --inverse-on-surface: #0F172A;

  /* Semantics */
  --error: #EF4444;
  --warning: #FACC15;
  --success: #22C55E;

  /* Text Hierarchy */
  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-tertiary: #94A3B8;
  --text-disabled: #475569;

  /* Glass */
  --glass-bg: rgba(15, 23, 42, 0.6);
  --glass-border: rgba(241, 245, 249, 0.1);
  --glass-blur: 20px;

  /* Avatar Gradient */
  --avatar-gradient-start: #8B5CF6;
  --avatar-gradient-mid: #6366F1;
  --avatar-gradient-end: #3B82F6;
  --avatar-shadow: rgba(139, 92, 246, 0.4);
}

/* ========================================
   LIGHT WARM (Cream background)
======================================== */
[data-theme="light-warm"] {
  /* Primitives */
  --brand-purple: #9333EA;
  --on-brand-purple: #F3E8FF;

  /* Surfaces */
  --surface: #FDFBF7;
  --surface-dim: #F5F1EB;
  --surface-bright: #FFFFFF;
  --surf-container: #FFFFFF;
  --surf-container-lowest: #F5F1EB;
  --surf-container-low: #FDFBF7;
  --surf-container-high: #F0EAD6;
  --surf-container-highest: #E8E0D0;

  /* On Surfaces */
  --on-surface: #1C1917;
  --on-surface-var-1: #44403C;
  --on-surface-var-2: #78716C;

  /* Outlines */
  --outline: #A8A29E;
  --outline-variant: #D6D3D1;

  /* Inverse */
  --inverse-surface: #1C1917;
  --inverse-on-surface: #F5F1EB;

  /* Semantics */
  --error: #DC2626;
  --warning: #EAB308;
  --success: #16A34A;

  /* Text Hierarchy */
  --text-primary: #1C1917;
  --text-secondary: #44403C;
  --text-tertiary: #78716C;
  --text-disabled: #D6D3D1;

  /* Glass */
  --glass-bg: rgba(253, 251, 247, 0.6);
  --glass-border: rgba(28, 25, 23, 0.1);
  --glass-blur: 20px;

  /* Avatar Gradient */
  --avatar-gradient-start: #9333EA;
  --avatar-gradient-mid: #C026D3;
  --avatar-gradient-end: #E11D48;
  --avatar-shadow: rgba(147, 51, 234, 0.3);
}

/* ========================================
   LIGHT COOL (Gray background)
======================================== */
[data-theme="light-cool"] {
  /* Primitives */
  --brand-purple: #7C3AED;
  --on-brand-purple: #EDE9FE;

  /* Surfaces */
  --surface: #FAFAFA;
  --surface-dim: #F4F4F5;
  --surface-bright: #FFFFFF;
  --surf-container: #FFFFFF;
  --surf-container-lowest: #F4F4F5;
  --surf-container-low: #FAFAFA;
  --surf-container-high: #E4E4E7;
  --surf-container-highest: #D4D4D8;

  /* On Surfaces */
  --on-surface: #18181B;
  --on-surface-var-1: #3F3F46;
  --on-surface-var-2: #71717A;

  /* Outlines */
  --outline: #A1A1AA;
  --outline-variant: #D4D4D8;

  /* Inverse */
  --inverse-surface: #18181B;
  --inverse-on-surface: #F4F4F5;

  /* Semantics */
  --error: #DC2626;
  --warning: #EAB308;
  --success: #16A34A;

  /* Text Hierarchy */
  --text-primary: #18181B;
  --text-secondary: #3F3F46;
  --text-tertiary: #71717A;
  --text-disabled: #D4D4D8;

  /* Glass */
  --glass-bg: rgba(250, 250, 250, 0.6);
  --glass-border: rgba(24, 24, 27, 0.1);
  --glass-blur: 20px;

  /* Avatar Gradient */
  --avatar-gradient-start: #7C3AED;
  --avatar-gradient-mid: #8B5CF6;
  --avatar-gradient-end: #A855F7;
  --avatar-shadow: rgba(124, 58, 237, 0.3);
}

/* ========================================
   HIGH CONTRAST (Accessibility)
======================================== */
[data-theme="high-contrast"] {
  /* Primitives */
  --brand-purple: #C084FC;
  --on-brand-purple: #4C1D95;

  /* Surfaces */
  --surface: #000000;
  --surface-dim: #000000;
  --surface-bright: #1A1A1A;
  --surf-container: #1A1A1A;
  --surf-container-lowest: #000000;
  --surf-container-low: #0D0D0D;
  --surf-container-high: #2A2A2A;
  --surf-container-highest: #3A3A3A;

  /* On Surfaces */
  --on-surface: #FFFFFF;
  --on-surface-var-1: #F0F0F0;
  --on-surface-var-2: #D0D0D0;

  /* Outlines */
  --outline: #FFFFFF;
  --outline-variant: #808080;

  /* Inverse */
  --inverse-surface: #FFFFFF;
  --inverse-on-surface: #000000;

  /* Semantics */
  --error: #FF4444;
  --warning: #FFD700;
  --success: #00FF00;

  /* Text Hierarchy */
  --text-primary: #FFFFFF;
  --text-secondary: #F0F0F0;
  --text-tertiary: #D0D0D0;
  --text-disabled: #606060;

  /* Glass */
  --glass-bg: rgba(0, 0, 0, 0.8);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: 10px;

  /* Avatar Gradient */
  --avatar-gradient-start: #C084FC;
  --avatar-gradient-mid: #A855F7;
  --avatar-gradient-end: #9333EA;
  --avatar-shadow: rgba(192, 132, 252, 0.5);
}

/* ========================================
   SEMANTIC COLOR COMPOSITIONS
======================================== */
.brand { background-color: var(--brand-primary); color: var(--on-brand); }
.brand-secondary { background-color: var(--brand-secondary); color: var(--on-brand); }
.on-brand { color: var(--brand-primary); }
.surface { background-color: var(--surface); color: var(--on-surface); }
.surface-elevated { background-color: var(--surf-container-high); }
.error { background-color: var(--error); color: #FFFFFF; }
.warning { background-color: var(--warning); color: #000000; }
.success { background-color: var(--success); color: #000000; }
.outline { border-color: var(--outline); }
.outline-variant { border-color: --outline-variant; }