/**
 * Tariq Autos Electric — Design Tokens & CSS Custom Properties
 * Brand: Tariq Autos Electric (Lahore, Pakistan)
 * Authorized: Crown Electric Mobility & Eveon Electric
 */

:root {
  /* ==========================================================================
     Surface / Background Palette (Obsidian Automotive Dark)
     ========================================================================== */
  --bg-page: #0C0E12;
  --bg-primary: #11141A;
  --bg-secondary: #161A22;
  --bg-card: #1A1F29;
  --bg-card-hover: #222834;
  --bg-elevated: #242B38;
  --bg-glass: rgba(12, 14, 18, 0.75);
  --bg-glass-card: rgba(26, 31, 41, 0.65);
  --bg-glass-heavy: rgba(12, 14, 18, 0.92);

  /* ==========================================================================
     Brand Accent Colors: Tariq Autos Emerald Green
     ========================================================================== */
  --accent-green-dark: #008F4C;
  --accent-green: #00A859;
  --accent-green-bright: #00C853;
  --accent-green-neon: #00E676;
  --accent-green-soft: #10B981;
  --accent-green-glow: rgba(0, 200, 83, 0.25);
  --accent-green-glow-strong: rgba(0, 200, 83, 0.5);

  /* Secondary Accents */
  --accent-cyan: #38BDF8;
  --accent-cyan-glow: rgba(56, 189, 248, 0.25);
  --accent-gold: #F59E0B;
  --accent-gold-glow: rgba(245, 158, 11, 0.25);
  --accent-danger: #EF4444;
  --accent-success: #10B981;

  /* WhatsApp Official Brand */
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #20BA5A;
  --color-whatsapp-glow: rgba(37, 211, 102, 0.35);

  /* ==========================================================================
     Typography Colors
     ========================================================================== */
  --text-primary: #F9FAFB;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;
  --text-dim: #4B5563;
  --text-inverse: #0C0E12;

  /* ==========================================================================
     Borders & Dividers
     ========================================================================== */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-focus: var(--accent-green-bright);
  --border-green: rgba(0, 200, 83, 0.35);
  --border-cyan: rgba(56, 189, 248, 0.35);
  --border-gold: rgba(245, 158, 11, 0.35);

  /* ==========================================================================
     Battery & Technology Badge Tokens
     ========================================================================== */
  --badge-lfp-bg: rgba(56, 189, 248, 0.12);
  --badge-lfp-border: rgba(56, 189, 248, 0.35);
  --badge-lfp-text: #38BDF8;

  --badge-graphene-bg: rgba(245, 158, 11, 0.12);
  --badge-graphene-border: rgba(245, 158, 11, 0.35);
  --badge-graphene-text: #FBBF24;

  --badge-stock-bg: rgba(0, 200, 83, 0.12);
  --badge-stock-border: rgba(0, 200, 83, 0.35);
  --badge-stock-text: #00E676;

  --badge-brand-bg: rgba(255, 255, 255, 0.06);
  --badge-brand-border: rgba(255, 255, 255, 0.15);
  --badge-brand-text: #E5E7EB;

  /* ==========================================================================
     Radii
     ========================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* ==========================================================================
     Spacing Scale
     ========================================================================== */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */

  /* ==========================================================================
     Layout Containers & Geometry
     ========================================================================== */
  --container-max: 1280px;
  --container-padding: clamp(1rem, 4vw, 2.5rem);
  --header-height: 80px;
  --header-height-mobile: 68px;
  --bottom-bar-height: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-bottom-bar: 1035;
  --z-drawer-backdrop: 1040;
  --z-drawer: 1050;
  --z-modal-backdrop: 1060;
  --z-modal: 1070;
  --z-toast: 1080;

  /* ==========================================================================
     Shadows & Atmospheric Elevation
     ========================================================================== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 30px var(--accent-green-glow);
  --shadow-glow-lg: 0 0 50px var(--accent-green-glow-strong);
  --shadow-glow-cyan: 0 0 30px var(--accent-cyan-glow);

  /* ==========================================================================
     Transitions
     ========================================================================== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ==========================================================================
     Fonts
     ========================================================================== */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Montserrat', 'Inter', system-ui, sans-serif;
}