/* ==========================================================================
   AvtoZapros — Design System Foundations (v3 · carwow-inspired light)
   ==========================================================================
   Light page, one bold teal accent, near-black text, condensed display type,
   flat surfaces, strong chips, fat prices. Adapted for RU parallel imports.
   ========================================================================== */

/* -- Fonts ----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@87..112,400..900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* === Brand hue: Teal (приглушённая бирюза carwow, но темнее) =========== */
  --teal-50:  #E8FBFA;
  --teal-100: #C8F5F2;
  --teal-200: #97ECE6;
  --teal-300: #5FDED5;
  --teal-400: #2BC8BD;
  --teal-500: #14B3A7;     /* ⭐ primary accent */
  --teal-600: #0E978D;
  --teal-700: #0B7A72;
  --teal-800: #0C5C57;
  --teal-900: #0D3F3C;

  /* === Ink (почти-чёрный, carwow-style) ================================== */
  --ink-50:  #F5F6F7;
  --ink-100: #E7E9EC;
  --ink-200: #C9CDD4;
  --ink-300: #9AA1AC;
  --ink-400: #6E7682;
  --ink-500: #4A515C;
  --ink-600: #323841;
  --ink-700: #22262D;
  --ink-800: #14171C;
  --ink-900: #0B0D11;     /* ⭐ чёрный для кнопок / хедера / чипов */

  /* === Page / surfaces ==================================================== */
  --bg-page:       #F2F3F5;    /* carwow серо-светлый */
  --bg-surface:    #FFFFFF;    /* карточки */
  --bg-surface-2:  #FAFBFC;
  --bg-pill-dark:  var(--ink-900);
  --bg-accent:     var(--teal-300);  /* крупный teal блок */

  /* === Foreground ========================================================= */
  --fg-primary:   var(--ink-900);
  --fg-secondary: var(--ink-500);
  --fg-muted:     var(--ink-400);
  --fg-on-dark:   #FFFFFF;
  --fg-on-teal:   var(--ink-900);

  /* === Borders ============================================================ */
  --border-soft:   #E3E5E9;
  --border-strong: #D0D4DA;
  --border-dark:   var(--ink-900);

  /* === Semantic =========================================================== */
  --success-fg:  #0E8060;
  --success-bg:  #E2F7EE;
  --warning-fg:  #8A5A00;
  --warning-bg:  #FFF1CC;
  --danger-fg:   #B93A2E;
  --danger-bg:   #FCE5E1;
  --info-fg:     var(--teal-700);
  --info-bg:     var(--teal-100);
  --price-fg:    var(--ink-900);
  --save-bg:     var(--ink-900);
  --save-fg:     var(--teal-300);

  /* === Typography ========================================================= */
  --font-display: 'Archivo', 'Inter', system-ui, sans-serif;   /* condensed + heavy */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --fs-hero:   clamp(48px, 7.2vw, 96px);
  --fs-h1:     clamp(36px, 4.8vw, 64px);
  --fs-h2:     clamp(28px, 3.2vw, 40px);
  --fs-h3:     22px;
  --fs-h4:     18px;
  --fs-lead:   18px;
  --fs-body:   15px;
  --fs-small:  13px;
  --fs-meta:   12px;
  --fs-micro:  11px;

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.5;

  --tracking-hero:  -0.02em;
  --tracking-h:     -0.01em;
  --tracking-label: 0.02em;
  --tracking-mono:  0.04em;

  /* === Radii (carwow: мягкие, но без ваты) ================================ */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 9999px;

  /* === Shadows (почти нет — очень плоский стиль) ========================== */
  --shadow-card:       0 1px 0 rgba(11,13,17,0.04), 0 1px 3px rgba(11,13,17,0.06);
  --shadow-card-hover: 0 2px 0 rgba(11,13,17,0.05), 0 6px 18px -6px rgba(11,13,17,0.12);
  --shadow-dark-pill:  0 2px 0 rgba(11,13,17,0.10);
  --shadow-focus:      0 0 0 3px rgba(20,179,167,0.30);

  /* === Motion ============================================================= */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* === Spacing scale ====================================================== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* === Container ========================================================== */
  --container-max: 1200px;
  --container-pad: 24px;
}

/* --------------------------------------------------------------------------
   Base element styles
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* --------------------------------------------------------------------------
   Typography utilities
   -------------------------------------------------------------------------- */
.hero-title,
.h1, h1,
.h2, h2,
.h3, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-h);
  color: var(--fg-primary);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 900;
  letter-spacing: var(--tracking-hero);
  font-stretch: 90%;     /* Archivo variable width */
  text-transform: uppercase;
  line-height: 0.95;
}

.h1, h1 { font-size: var(--fs-h1); font-weight: 900; font-stretch: 90%; text-transform: uppercase; line-height: 0.98; }
.h2, h2 { font-size: var(--fs-h2); font-weight: 800; }
.h3, h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.005em; }

.lead { font-size: var(--fs-lead); color: var(--fg-secondary); line-height: 1.4; }
.meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--fg-muted); letter-spacing: var(--tracking-mono); }
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.price {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 90%;
  font-size: 28px;
  color: var(--price-fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.price-lg { font-size: 44px; }

/* --------------------------------------------------------------------------
   Buttons — carwow flat, black + white + accent
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  letter-spacing: -0.005em;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.btn-primary {
  background: var(--ink-900);
  color: var(--fg-on-dark);
}
.btn-primary:hover { background: var(--ink-700); }

.btn-accent {
  background: var(--teal-300);
  color: var(--ink-900);
}
.btn-accent:hover { background: var(--teal-400); }

.btn-secondary {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
}
.btn-secondary:hover { background: var(--ink-900); color: var(--fg-on-dark); }

.btn-ghost {
  background: transparent;
  color: var(--fg-primary);
  padding: 10px 14px;
}
.btn-ghost:hover { background: var(--ink-100); }

.btn-lg { padding: 18px 28px; font-size: 16px; }
.btn-sm { padding: 9px 14px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }

/* --------------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------------- */
.input-field {
  width: 100%;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--fg-primary);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.input-field::placeholder { color: var(--fg-muted); }
.input-field:focus { outline: none; border-color: var(--ink-900); box-shadow: var(--shadow-focus); }

/* --------------------------------------------------------------------------
   Badges / Chips — carwow uses two families:
     badge  = small status pill (inline in text flow)
     chip   = interactive filter (icon + label, hoverable)
     pill-dark = dark savings callout ("Avg saving £2,451 off RRP")
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge-success { background: var(--success-bg); color: var(--success-fg); border-color: rgba(14,128,96,0.18); }
.badge-warning { background: var(--warning-bg); color: var(--warning-fg); border-color: rgba(138,90,0,0.18); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-fg);  border-color: rgba(185,58,46,0.18); }
.badge-teal    { background: var(--teal-100);   color: var(--teal-800);   border-color: rgba(14,151,141,0.2); }
.badge-dark    { background: var(--ink-900);    color: var(--teal-300);   border-color: var(--ink-900); }
.badge-muted   { background: var(--ink-50);     color: var(--ink-500);    border-color: var(--border-soft); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-soft);
  color: var(--fg-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.chip:hover { border-color: var(--ink-900); }
.chip.is-active { background: var(--ink-900); color: var(--fg-on-dark); border-color: var(--ink-900); }
.chip-icon { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--teal-600); }
.chip.is-active .chip-icon { color: var(--teal-300); }

.pill-dark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--ink-900);
  color: var(--teal-300);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0;
  box-shadow: var(--shadow-dark-pill);
}

/* --------------------------------------------------------------------------
   Card primitives
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--dur-base), transform var(--dur-base), border-color var(--dur-base);
}
.card-hover:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); border-color: var(--border-strong); }