/* ============================================================
   GOOD CAR IMPORTS — Design System Tokens
   "Prestige Automotive Systems" Design Language
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- Material Symbols ---------- */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  /* ====== COLOR PALETTE (Material Design 3 / Prestige Automotive) ====== */

  /* Primary (Vibrant Red) */
  --primary: #bc001f;
  --on-primary: #ffffff;
  --primary-container: #e6192e;
  --on-primary-container: #fffcff;
  --inverse-primary: #ffb3ae;
  --primary-fixed: #ffdad7;
  --primary-fixed-dim: #ffb3ae;
  --on-primary-fixed: #410005;
  --on-primary-fixed-variant: #930016;

  /* Secondary (Chrome / Silver) */
  --secondary: #5b5f63;
  --on-secondary: #ffffff;
  --secondary-container: #e0e2e8;
  --on-secondary-container: #616569;
  --secondary-fixed: #e0e2e8;
  --secondary-fixed-dim: #c4c6cc;
  --on-secondary-fixed: #181c20;
  --on-secondary-fixed-variant: #44474b;

  /* Tertiary (WhatsApp Green) */
  --tertiary: #006b2e;
  --on-tertiary: #ffffff;
  --tertiary-container: #00873c;
  --on-tertiary-container: #f8fff4;
  --tertiary-fixed: #66ff8e;
  --tertiary-fixed-dim: #3de273;
  --on-tertiary-fixed: #002109;
  --on-tertiary-fixed-variant: #005322;

  /* Error */
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  /* Surface & Background */
  --surface: #f8f9fa;
  --surface-dim: #d9dadb;
  --surface-bright: #f8f9fa;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f3f4f5;
  --surface-container: #edeeef;
  --surface-container-high: #e7e8e9;
  --surface-container-highest: #e1e3e4;
  --on-surface: #191c1d;
  --on-surface-variant: #5d3f3d;
  --surface-variant: #e1e3e4;
  --surface-tint: #c00020;

  /* Inverse */
  --inverse-surface: #2e3132;
  --inverse-on-surface: #f0f1f2;

  /* Outline */
  --outline: #926e6c;
  --outline-variant: #e7bcb9;

  /* Background */
  --background: #f8f9fa;
  --on-background: #191c1d;

  /* ====== ADDITIONAL UI COLORS ====== */
  --border-silver: #e2e8f0;
  --whatsapp-green: #25D366;


  /* ====== TYPOGRAPHY ====== */

  /* Font Families */
  --font-headline: 'Hanken Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Display Large */
  --display-lg-size: 48px;
  --display-lg-line: 56px;
  --display-lg-weight: 700;
  --display-lg-tracking: -0.02em;

  /* Headline Large */
  --headline-lg-size: 32px;
  --headline-lg-line: 40px;
  --headline-lg-weight: 600;

  /* Headline Large Mobile */
  --headline-lg-mobile-size: 28px;
  --headline-lg-mobile-line: 36px;
  --headline-lg-mobile-weight: 600;

  /* Title Medium */
  --title-md-size: 20px;
  --title-md-line: 28px;
  --title-md-weight: 600;

  /* Body Large */
  --body-lg-size: 18px;
  --body-lg-line: 28px;
  --body-lg-weight: 400;

  /* Body Medium */
  --body-md-size: 16px;
  --body-md-line: 24px;
  --body-md-weight: 400;

  /* Label Small */
  --label-sm-size: 12px;
  --label-sm-line: 16px;
  --label-sm-weight: 600;
  --label-sm-tracking: 0.05em;

  /* Price BDT */
  --price-bdt-size: 24px;
  --price-bdt-line: 32px;
  --price-bdt-weight: 700;


  /* ====== SPACING ====== */
  --unit-xs: 4px;
  --unit-sm: 8px;
  --unit-md: 16px;
  --unit-lg: 24px;
  --unit-xl: 48px;
  --gutter: 24px;
  --container-max: 100%;
  --margin-desktop: 64px;
  --margin-mobile: 20px;


  /* ====== BORDER RADIUS ====== */
  --radius-sm: 0.125rem;  /* 2px */
  --radius: 0.25rem;      /* 4px — standard elements */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px — cards/images */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-full: 9999px;  /* pill */


  /* ====== ELEVATION & SHADOWS ====== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-ambient: 0 20px 30px -10px rgba(91, 95, 99, 0.06);
  --shadow-card-hover: 0 20px 30px -10px rgba(91, 95, 99, 0.10);
  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

  /* ====== GLASSMORPHISM ====== */
  --glass-blur: 12px;
  --glass-bg: rgba(255, 255, 255, 0.80);

  /* ====== TRANSITIONS ====== */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ====== SIDEBAR ====== */
  --sidebar-width: 256px;
}


/* ====== UTILITY CLASSES ====== */

/* Typography */
.font-headline { font-family: var(--font-headline); }
.font-body { font-family: var(--font-body); }

.text-display-lg {
  font-family: var(--font-headline);
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-line);
  font-weight: var(--display-lg-weight);
  letter-spacing: var(--display-lg-tracking);
}

.text-headline-lg {
  font-family: var(--font-headline);
  font-size: var(--headline-lg-size);
  line-height: var(--headline-lg-line);
  font-weight: var(--headline-lg-weight);
}

.text-headline-lg-mobile {
  font-family: var(--font-headline);
  font-size: var(--headline-lg-mobile-size);
  line-height: var(--headline-lg-mobile-line);
  font-weight: var(--headline-lg-mobile-weight);
}

.text-title-md {
  font-family: var(--font-body);
  font-size: var(--title-md-size);
  line-height: var(--title-md-line);
  font-weight: var(--title-md-weight);
}

.text-body-lg {
  font-family: var(--font-body);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line);
  font-weight: var(--body-lg-weight);
}

.text-body-md {
  font-family: var(--font-body);
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
  font-weight: var(--body-md-weight);
}

.text-label-sm {
  font-family: var(--font-body);
  font-size: var(--label-sm-size);
  line-height: var(--label-sm-line);
  font-weight: var(--label-sm-weight);
  letter-spacing: var(--label-sm-tracking);
}

.text-price-bdt {
  font-family: var(--font-headline);
  font-size: var(--price-bdt-size);
  line-height: var(--price-bdt-line);
  font-weight: var(--price-bdt-weight);
  color: var(--primary);
}

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}


/* ====== GLOBAL RESET & BASE ====== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
  color: var(--on-surface);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Container */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--margin-desktop);
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--margin-mobile);
  }
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Selection */
::selection {
  background-color: var(--primary-fixed);
  color: var(--on-primary-fixed);
}

/* ====== DARK THEME OVERRIDES ====== */
[data-theme="dark"] {
  /* Primary (Vibrant Red) */
  --primary: #ff4d5e;
  --on-primary: #ffffff;
  --primary-container: #ba1a1a;
  --on-primary-container: #ffdad6;
  
  /* Secondary (Chrome / Silver) */
  --secondary: #b0b4b8;
  --on-secondary: #191c1d;
  --secondary-container: #404447;
  --on-secondary-container: #e0e2e8;

  /* Tertiary (WhatsApp Green) */
  --tertiary: #3de273;
  --on-tertiary: #003915;
  --tertiary-container: #005322;
  --on-tertiary-container: #66ff8e;

  /* Error */
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffb4ab;

  /* Surface & Background */
  --surface: #121212;
  --surface-dim: #0a0a0a;
  --surface-bright: #1c1c1c;
  --surface-container-lowest: #050505;
  --surface-container-low: #151515;
  --surface-container: #1e1e1e;
  --surface-container-high: #2b2b2b;
  --surface-container-highest: #363636;
  --on-surface: #e1e3e4;
  --on-surface-variant: #b1a9a8;
  --surface-variant: #4a4544;
  
  /* Inverse */
  --inverse-surface: #e1e3e4;
  --inverse-on-surface: #191c1d;

  /* Outline */
  --outline: #9c9190;
  --outline-variant: #4a4544;

  /* Background */
  --background: #121212;
  --on-background: #e1e3e4;

  /* Glassmorphism overrides */
  --glass-bg: rgba(20, 20, 20, 0.85);

  /* Utilities */
  --border-silver: #333333;
}