/* File: assets/css/base.css */
/* Base (tokens + reset + typography + global element defaults). */

/* ------------------------------------------------------------
   Tokens (single source of truth fallback)
   - Safe even if parent defines similar vars: we want child DS to win.
------------------------------------------------------------ */
:root{
  /* Typography */
  --dag-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --dag-font-display: "Antonio", var(--dag-font);
  --dag-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --dag-lh: 1.6;

  /* Layout */
  --dag-container: 1160px;
  --dag-gutter: 18px;
  --dag-gutter-lg: 26px;
  --dag-section: 64px;

  /* Core palette (dark) */
  --dag-bg: #0b1220;
  --dag-surface: #111a2b;
  --dag-surface-2: rgb(255, 255, 255);
  --dag-text: #e5e7eb;
  --dag-muted: #98a2b3;
  --dag-border: rgba(255,255,255,.12);

  /* Brand */
  --dag-primary: #e11d48;
  --dag-primary-hover: #be123c;
  --dag-primary-contrast: #ffffff;

  --dag-accent: #22c55e;
  --dag-accent-hover: #16a34a;
  --dag-accent-contrast: #071a0c;

  --dag-link: #60a5fa;
  --dag-link-hover: #93c5fd;

  /* Status */
  --dag-danger: #dc2626;
  --dag-warning: #d97706;
  --dag-success: #16a34a;

  /* Radius */
  --dag-radius-sm: 12px;
  --dag-radius-md: 16px;
  --dag-radius-lg: 20px;
  --dag-radius: var(--dag-radius-md);

  /* Elevation */
  --dag-shadow-xs: 0 1px 1px rgba(0,0,0,.16), 0 8px 22px rgba(0,0,0,.18);
  --dag-shadow-sm: 0 1px 2px rgba(0,0,0,.18), 0 10px 28px rgba(0,0,0,.24);
  --dag-shadow-md: 0 10px 40px rgba(0,0,0,.30);

  /* Spacing */
  --dag-gap-sm: 12px;
  --dag-gap: 16px;
  --dag-gap-lg: 24px;
  --dag-gap-xl: 32px;

  /* Interaction */
  --dag-ring-color: rgba(96,165,250,.26);
  --dag-ring: 0 0 0 4px var(--dag-ring-color);
  --dag-transition: 160ms cubic-bezier(.2,.8,.2,1);

  /* Motion */
  --anim-fast: 160ms;
  --anim-med: 220ms;
  --anim-slow: 420ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);

  /* Misc */
  --dag-max-prose: 72ch;

  /* Back-compat aliases (keep existing CSS stable) */
  --bg: var(--dag-bg);
  --surface: var(--dag-surface);
  --surface-2: var(--dag-surface-2);
  --text: var(--dag-text);
  --muted: var(--dag-muted);
  --line: var(--dag-border);
  --border: var(--dag-border);

  --primary: var(--dag-primary);
  --primary-contrast: var(--dag-primary-contrast);
  --accent: var(--dag-accent);

  --brand: var(--dag-link);
  --brand-2: var(--dag-accent);
  --danger: var(--dag-danger);

  --radius: var(--dag-radius-md);
  --shadow: var(--dag-shadow-md);
  --shadow-soft: var(--dag-shadow-sm);

  --container: var(--dag-container);
  --gutter: var(--dag-gutter);

  /* Legacy focus variable used by some CSS */
  --ring: var(--dag-ring-color);
}

@media (max-width: 900px){
  :root{
    --dag-section: 44px;
    --dag-gutter-lg: 18px;
  }
}
@media (max-width: 600px){
  :root{
    --dag-section: 34px;
    --dag-gutter: 16px;
  }
}

/* ------------------------------------------------------------
   Reset
------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  font-family:var(--dag-font);
  line-height:var(--dag-lh);
  color:var(--dag-text);
  background:
    radial-gradient(1100px 650px at 20% -10%, rgba(96,165,250,.18), transparent 60%),
    radial-gradient(1000px 600px at 110% 10%, rgba(34,197,94,.12), transparent 55%),
    var(--dag-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,svg,video,canvas{max-width:100%;height:auto}
img{display:block}

button,input,select,textarea{font:inherit}
button{color:inherit}

::selection{background:rgba(96,165,250,.28)}

/* ------------------------------------------------------------
   Typography
------------------------------------------------------------ */
p{margin:0 0 1em}
small{font-size:.875em;color:var(--dag-muted)}
strong{font-weight:800}

h1,h2,h3,h4,h5,h6{margin:0 0 .5em;line-height:1.15}
h1{font-size:clamp(1.9rem, 1.2rem + 2.8vw, 3.35rem)}
h2{font-size:clamp(1.55rem, 1.1rem + 1.9vw, 2.55rem)}
h3{font-size:clamp(1.15rem, 1.0rem + .9vw, 1.65rem)}

:where(h1,h2,h3,h4,h5,h6,.site-title,.section-title,.page-title){
  font-family:var(--dag-font-display);
  font-weight:800;
}

/* Eyebrow / kicker */
:where(.hero__eyebrow,.section-eyebrow,.dag-eyebrow){
  display:inline-block;
  font-family:var(--dag-font-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  color:var(--dag-muted);
}

/* Links */
a{color:var(--dag-link);text-underline-offset:.18em}
a:hover{color:var(--dag-link-hover)}

/* Lists */
ul,ol{margin:0 0 1em;padding-left:1.2em}
li{margin:.25em 0}

/* HR */
hr{
  border:0;
  border-top:1px solid var(--dag-border);
  margin:clamp(18px, 3vw, 30px) 0;
}

/* Focus */
:where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex='-1'])):focus-visible{
  outline:none;
  box-shadow:var(--dag-ring);
}

/* Utility */
.dag-muted{color:var(--dag-muted)}
.car-sr,
.car-sr:not(:focus):not(:active){
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Price / numeric typography */
:where(
  .price,.amount,.woocommerce-Price-amount,
  .dag-price,.car-price,.vehicle-price,
  .vehicle-card__price,.inventory-card__price,.home-featured__price,.car-card__price,
  .inv-price,.inv-meta__value,
  [class*="mileage"],[class*="year"],[class*="stock"]
){
  font-family:"Manrope","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------
   Minimal layout fallbacks (in case layout.css is not enqueued)
------------------------------------------------------------ */
:where(.dag-container,.container,.site-container,.wrap){
  width:100%;
  max-width:var(--dag-container);
  margin-inline:auto;
  padding-inline:var(--dag-gutter);
}

.section{position:relative}
.section-padding{padding-block:var(--dag-section)}

/* ------------------------------------------------------------
   Baseline Gallery / Pagination (works even without components files)
------------------------------------------------------------ */
:where(.car-gallery){
  display:grid;
  gap:var(--dag-gap);
}

:where(.car-gallery__main-btn){
  appearance:none;
  border:1px solid var(--dag-border);
  border-radius:var(--dag-radius-lg);
  background:rgba(255,255,255,.03);
  padding:0;
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--dag-shadow-xs);
}

:where(.car-gallery__main-img){
  width:100%;
  height:auto;
  display:block;
}

:where(.car-gallery__thumbs){
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:10px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:4px;
}

:where(.car-thumb){
  appearance:none;
  border:1px solid var(--dag-border);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  padding:0;
  width:74px;
  height:74px;
  overflow:hidden;
  cursor:pointer;
  scroll-snap-align:start;
}

:where(.car-thumb img){
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

:where(.car-thumb.is-active,[aria-current="true"].car-thumb){
  border-color:rgba(96,165,250,.45);
  box-shadow:var(--dag-ring);
}

:where(.pagination,.nav-links){
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin:24px 0 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}