/* ==========================================================================
   XPIR DESIGN TOKENS — LINEAR / OPAL ULTRA-DARK LUXURY PALETTE
   ========================================================================== */

:root {
  /* Color Canvas — Void & Obsidian */
  --bg-void: #050507;
  --bg-primary: #0A0A0C;
  --bg-surface: #121215;
  --bg-surface-elevated: #191920;
  --bg-surface-hover: #22222B;
  
  /* Glassmorphism & Translucent Layers */
  --glass-card: rgba(18, 18, 22, 0.72);
  --glass-card-hover: rgba(26, 26, 32, 0.85);
  --glass-card-border: rgba(255, 255, 255, 0.08);
  --glass-card-border-hover: rgba(238, 95, 43, 0.35);
  --glass-blur: 24px;
  --glass-blur-sm: 12px;

  /* Brand Accents — Volcanic Tangerine */
  --brand-primary: #EE5F2B;
  --brand-light: #FF8A5B;
  --brand-dark: #D4511F;
  --brand-gradient: linear-gradient(135deg, #EE5F2B 0%, #FFB088 100%);
  --brand-gradient-hover: linear-gradient(135deg, #FF6F3D 0%, #FFC4A6 100%);
  --brand-glow: rgba(238, 95, 43, 0.28);
  --brand-glow-lg: rgba(238, 95, 43, 0.12);
  --brand-glow-subtle: rgba(238, 95, 43, 0.05);

  /* Status Colors (From Xpir Mobile App System) */
  --status-red: #FF453A;
  --status-red-bg: rgba(255, 69, 58, 0.12);
  --status-red-border: rgba(255, 69, 58, 0.3);

  --status-orange: #FF9F0A;
  --status-orange-bg: rgba(255, 159, 10, 0.12);
  --status-orange-border: rgba(255, 159, 10, 0.3);

  --status-green: #30D158;
  --status-green-bg: rgba(48, 209, 88, 0.12);
  --status-green-border: rgba(48, 209, 88, 0.3);

  --status-blue: #3B82F6;
  --status-blue-bg: rgba(59, 130, 246, 0.12);
  --status-blue-border: rgba(59, 130, 246, 0.3);

  --status-purple: #8B5CF6;
  --status-purple-bg: rgba(139, 92, 246, 0.12);
  --status-purple-border: rgba(139, 92, 246, 0.3);

  /* Text & Content Hierarchy */
  --text-primary: #FFFFFF;
  --text-secondary: #94A3B8;
  --text-tertiary: #64748B;
  --text-muted: #475569;
  --text-contrast: #0F0F0F;

  /* Metallic & Line Borders */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-subtle-2: rgba(255, 255, 255, 0.12);
  --border-metallic: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.03) 100%);

  /* Spatial Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.7);
  --shadow-brand: 0 12px 36px rgba(238, 95, 43, 0.35);
  --shadow-device: 0 35px 80px -15px rgba(0, 0, 0, 0.8), 0 0 50px rgba(238, 95, 43, 0.15);

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: clamp(2.75rem, 6vw, 4.75rem);
  --font-h1: clamp(2.25rem, 4vw, 3.5rem);
  --font-h2: clamp(1.75rem, 3vw, 2.5rem);
  --font-h3: clamp(1.25rem, 2vw, 1.625rem);
  --font-body: 1rem;
  --font-caption: 0.875rem;
  --font-micro: 0.75rem;

  /* Border Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Transitions & Curves */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.18s var(--ease-smooth);
  --transition-normal: 0.35s var(--ease-spring);
  --transition-slow: 0.6s var(--ease-spring);
}

/* ==========================================================================
   LIGHT MODE OVERRIDES (System & Manual)
   ========================================================================== */

:root[data-theme="light"] {
  --bg-void: #F8FAFC;
  --bg-primary: #FFFFFF;
  --bg-surface: #F1F5F9;
  --bg-surface-elevated: #E2E8F0;
  --bg-surface-hover: #CBD5E1;
  
  --glass-card: rgba(255, 255, 255, 0.85);
  --glass-card-hover: rgba(255, 255, 255, 0.95);
  --glass-card-border: rgba(0, 0, 0, 0.08);
  --glass-card-border-hover: rgba(238, 95, 43, 0.35);

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-tertiary: #64748B;
  --text-muted: #94A3B8;
  --text-contrast: #FFFFFF;

  --border-subtle: rgba(0, 0, 0, 0.07);
  --border-subtle-2: rgba(0, 0, 0, 0.12);
  --border-metallic: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.02) 100%);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-void: #F8FAFC;
    --bg-primary: #FFFFFF;
    --bg-surface: #F1F5F9;
    --bg-surface-elevated: #E2E8F0;
    --bg-surface-hover: #CBD5E1;
    
    --glass-card: rgba(255, 255, 255, 0.85);
    --glass-card-hover: rgba(255, 255, 255, 0.95);
    --glass-card-border: rgba(0, 0, 0, 0.08);
    --glass-card-border-hover: rgba(238, 95, 43, 0.35);

    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-tertiary: #64748B;
    --text-muted: #94A3B8;
    --text-contrast: #FFFFFF;

    --border-subtle: rgba(0, 0, 0, 0.07);
    --border-subtle-2: rgba(0, 0, 0, 0.12);
    --border-metallic: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.02) 100%);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
  }
}