/**
 * Concept Auto Design Tokens - CSS Custom Properties
 * Automotive High-End Performance Design System
 */

:root {
  /* ==========================================================================
     Primitive Tokens - Palette
     ========================================================================== */
  
  /* Brand Red (Laser Tail Lamp) */
  --ca-color-red-50: #FFF1F2;
  --ca-color-red-100: #FFE4E6;
  --ca-color-red-200: #FECDD3;
  --ca-color-red-300: #FDA4AF;
  --ca-color-red-400: #FB7185;
  --ca-color-red-500: #E50914; /* Core Brand Red */
  --ca-color-red-600: #C80813;
  --ca-color-red-700: #990008;
  --ca-color-red-800: #77050A;
  --ca-color-red-900: #4C0003;
  --ca-color-red-glow: rgba(229, 9, 20, 0.35);

  /* Metallic Silver / Chrome */
  --ca-color-chrome-50: #FFFFFF;
  --ca-color-chrome-100: #F8FAFC;
  --ca-color-chrome-200: #E2E8F0;
  --ca-color-chrome-300: #CBD5E1;
  --ca-color-chrome-400: #94A3B8;
  --ca-color-chrome-500: #64748B;
  --ca-gradient-chrome: linear-gradient(135deg, #FFFFFF 0%, #D1D5DB 48%, #9CA3AF 52%, #F3F4F6 100%);
  --ca-gradient-chrome-border: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.03) 100%);

  /* Carbon Obsidian Neutrals */
  --ca-color-carbon-950: #07080A;
  --ca-color-carbon-900: #0D0E12;
  --ca-color-carbon-850: #13151B;
  --ca-color-carbon-800: #1A1D25;
  --ca-color-carbon-700: #2A2E3B;
  --ca-color-carbon-600: #424859;
  --ca-color-carbon-500: #616A82;
  --ca-color-carbon-400: #8C96AD;
  --ca-color-carbon-300: #B7BFD3;
  --ca-color-carbon-200: #DEE2EC;
  --ca-color-carbon-100: #F1F3F7;
  --ca-color-carbon-50: #F8F9FA;

  /* Semantics */
  --ca-color-success: #10B981;
  --ca-color-warning: #F59E0B;
  --ca-color-error: #EF4444;
  --ca-color-info: #38BDF8;

  /* ==========================================================================
     Typography Tokens
     ========================================================================== */
  --ca-font-display: 'Michroma', 'Eurostile', 'Montserrat', -apple-system, sans-serif;
  --ca-font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ca-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --ca-font-weight-regular: 400;
  --ca-font-weight-medium: 500;
  --ca-font-weight-semibold: 600;
  --ca-font-weight-bold: 700;
  --ca-font-weight-black: 900;

  --ca-font-size-xs: 0.75rem;    /* 12px */
  --ca-font-size-sm: 0.875rem;   /* 14px */
  --ca-font-size-base: 1rem;     /* 16px */
  --ca-font-size-lg: 1.125rem;   /* 18px */
  --ca-font-size-xl: 1.25rem;    /* 20px */
  --ca-font-size-2xl: 1.5rem;    /* 24px */
  --ca-font-size-3xl: 1.875rem;  /* 30px */
  --ca-font-size-4xl: 2.25rem;   /* 36px */
  --ca-font-size-5xl: 3rem;      /* 48px */
  --ca-font-size-6xl: 4rem;      /* 64px */

  --ca-letter-spacing-tight: -0.02em;
  --ca-letter-spacing-normal: 0em;
  --ca-letter-spacing-wide: 0.08em;
  --ca-letter-spacing-wider: 0.18em;
  --ca-letter-spacing-widest: 0.3em;

  /* ==========================================================================
     Spacing & Grid
     ========================================================================== */
  --ca-space-1: 4px;
  --ca-space-2: 8px;
  --ca-space-3: 12px;
  --ca-space-4: 16px;
  --ca-space-5: 20px;
  --ca-space-6: 24px;
  --ca-space-8: 32px;
  --ca-space-10: 40px;
  --ca-space-12: 48px;
  --ca-space-16: 64px;
  --ca-space-20: 80px;

  /* Radii */
  --ca-radius-none: 0px;
  --ca-radius-xs: 2px;
  --ca-radius-sm: 4px;
  --ca-radius-md: 8px;
  --ca-radius-lg: 12px;
  --ca-radius-full: 9999px;

  /* Elevation & Glows */
  --ca-shadow-subtle: 0 4px 12px rgba(0, 0, 0, 0.4);
  --ca-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.7);
  --ca-shadow-glow-red: 0 0 24px rgba(229, 9, 20, 0.4);
  --ca-shadow-glow-subtle: 0 0 15px rgba(229, 9, 20, 0.2);

  /* Transitions */
  --ca-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ca-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ca-transition-spring: 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==========================================================================
   Semantic Theme Mapping - Dark Mode (Default / Native Identity)
   ========================================================================== */
:root, [data-theme="dark"] {
  --bg-primary: var(--ca-color-carbon-950);
  --bg-secondary: var(--ca-color-carbon-900);
  --surface: var(--ca-color-carbon-850);
  --surface-raised: var(--ca-color-carbon-800);
  --surface-overlay: rgba(7, 8, 10, 0.88);

  --text-primary: #FFFFFF;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-accent: var(--ca-color-red-500);

  --border: rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-accent: var(--ca-color-red-500);

  --accent: var(--ca-color-red-500);
  --accent-hover: var(--ca-color-red-600);
  --accent-active: var(--ca-color-red-700);
  --accent-glow: rgba(229, 9, 20, 0.35);

  /* Aliases para compatibilidade */
  --color-surface-canvas: var(--bg-primary);
  --color-surface-base: var(--bg-secondary);
  --color-surface-card: var(--surface);
  --color-surface-card-hover: var(--surface-raised);
  --color-surface-overlay: var(--surface-overlay);

  --color-border-subtle: var(--border-subtle);
  --color-border-medium: var(--border);
  --color-border-accent: var(--border-accent);

  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-muted);
  --color-text-accent: var(--text-accent);

  --color-accent-primary: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-active: var(--accent-active);

  --color-interactive-focus: rgba(229, 9, 20, 0.5);
  --theme-toggle-bg: rgba(255, 255, 255, 0.08);
  --theme-toggle-border: rgba(255, 255, 255, 0.15);
  --theme-toggle-color: #F8FAFC;
}

/* ==========================================================================
   Semantic Theme Mapping - Light Mode (High-contrast clean luxury)
   ========================================================================== */
[data-theme="light"] {
  --bg-primary: #F8FAFC;
  --bg-secondary: #FFFFFF;
  --surface: #FFFFFF;
  --surface-raised: #F1F5F9;
  --surface-overlay: rgba(255, 255, 255, 0.92);

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-accent: #D90429;

  --border: rgba(0, 0, 0, 0.12);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-accent: #D90429;

  --accent: #D90429;
  --accent-hover: #B80322;
  --accent-active: #9B001B;
  --accent-glow: rgba(217, 4, 41, 0.2);

  /* Aliases para compatibilidade */
  --color-surface-canvas: var(--bg-primary);
  --color-surface-base: var(--bg-secondary);
  --color-surface-card: var(--surface);
  --color-surface-card-hover: var(--surface-raised);
  --color-surface-overlay: var(--surface-overlay);

  --color-border-subtle: var(--border-subtle);
  --color-border-medium: var(--border);
  --color-border-accent: var(--border-accent);

  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-muted);
  --color-text-accent: var(--text-accent);

  --color-accent-primary: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-active: var(--accent-active);

  --color-interactive-focus: rgba(217, 4, 41, 0.3);
  --theme-toggle-bg: rgba(0, 0, 0, 0.06);
  --theme-toggle-border: rgba(0, 0, 0, 0.12);
  --theme-toggle-color: #0F172A;
}