/* ==========================================================================
   Drive Smart Autos — base.css
   Reset, design tokens, self-hosted fonts, base typography.
   ========================================================================== */

/* ---- Fonts (self-hosted, only weights used, swap) ---- */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-variable.woff2") format("woff2-variations"),
      url("../fonts/archivo-variable.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62.5% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("../fonts/satoshi-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("../fonts/satoshi-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("../fonts/satoshi-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ---- Design tokens ----
   Palette sampled directly from the official logo (assets/img/official-logo.jpeg):
   electric azure blue + chrome silver on black. Every grey carries a cool
   (blue) shift so it sits under the logo rather than fighting it. */
:root{
  /* The site is dark throughout (client direction, Sep 2026 — the original
     brief's light "day" sections are gone). To avoid one flat black slab, the
     alternating rhythm is kept but expressed as a tonal ladder in black and
     blue-grey: .on-night sections sit near black, .on-day sections sit a step
     lighter, and cards a step lighter again. Every grey is cool-shifted toward
     the logo blue. */

  /* Deep band — .on-night sections, header, footer */
  --ink-950:#000000;   /* pure black — the logo's own ground; footer, full-bleed */
  --ink-900:#05080C;   /* .on-night section surface, header */
  --ink-800:#151D28;   /* raised card on a night section */
  --ink-line:#1E2833;  /* hairline on night */

  /* Lighter band — what used to be the light "day"/paper sections.
     Names kept (--paper*) so the hundreds of existing references keep working;
     they are blue-grey charcoals now, not paper. */
  --paper:#131A24;      /* .on-day section surface */
  --paper-2:#19212C;    /* .on-day.alt band */
  --paper-card:#202A38; /* cards/inputs on those sections */
  --rule:#2B3644;       /* hairline on those sections */

  /* Type colour — light on dark everywhere now, so the day/night pairs match */
  --text-hi:#EDF1F6;
  --text-lo:#96A2AF;
  --onink-hi:#EDF1F6;
  --onink-lo:#96A2AF;

  /* Brand accent — logo blue.
     --brand is the bright azure from the logo's "SMART" and car highlight; it
     sings on dark surfaces (5.1:1 on --ink-900). --brand-deep is the deeper
     blue also present in the logo's gradient, used for filled buttons so white
     label text clears 4.5:1. --brand-text is blue used as *text* — now that
     every surface is dark it is a brighter azure, not the old deep one
     (5.6:1 on a card, 6.1:1 on the alt band). */
  --brand:#0B8DEE;
  --brand-deep:#0A6FC6;
  --brand-press:#0A5CA3;
  --brand-text:#2FA1F2;

  /* Chrome / silver — the logo's metallic lettering */
  --chrome-hi:#F4F6F8;
  --chrome:#C6CCD4;
  --chrome-lo:#8A929C;
  --chrome-grad:linear-gradient(175deg,#FFFFFF 0%,#DDE3EA 26%,#9BA5B0 52%,#EEF2F6 74%,#B4BDC7 100%);

  /* Radius */
  --r-flat:0;
  --r-input:4px;
  --r-card:12px;

  /* Spacing */
  --sp-1:8px;  --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:40px; --sp-6:56px; --sp-7:72px; --sp-8:96px;
  --section-pad:clamp(72px,10vw,140px);
  --gutter:clamp(20px,4vw,40px);

  /* Grid */
  --container-max:1360px;
  --col-gap:24px;

  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:120ms;
  --dur-base:240ms;
  --dur-header:320ms;
  --dur-panel:320ms;

  /* Z-index scale — single source of truth, do not add ad-hoc z-index elsewhere */
  --z-base:0;
  --z-ticker:10;
  --z-card-hover:20;
  --z-header:100;
  --z-utility-bar:110;
  --z-mega-menu:120;
  --z-mobile-action-bar:130;
  --z-mobile-panel:140;
  --z-toast:150;
  --z-cursor:160;

  /* Type families */
  --f-display:"Archivo","Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Satoshi","Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  color-scheme:dark;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html,body{height:100%;}
body{
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.62;
  color:var(--text-hi);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,video,canvas,svg{display:block;max-width:100%;}
img{height:auto;object-fit:cover;}
input,button,textarea,select{font:inherit;color:inherit;}
button{
  cursor:pointer;background:none;border:0;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  color:inherit;font:inherit;text-align:inherit;
}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;padding:0;}
table{border-collapse:collapse;width:100%;}
p,li,dd{overflow-wrap:anywhere;}
/* Headings only break a word when it genuinely will not fit, so a long name
   cannot push a display-size heading past the container on a 320px screen. */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{overflow-wrap:break-word;}
:target{scroll-margin-top:120px;}

/* ---- Reduced motion: kill everything, land on final visible state ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---- Focus ---- */
:focus{outline:none;}
:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:2px;
}
/* Both bands are dark now, so the one bright ring works everywhere. */

/* ---- Type scale ---- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1;letter-spacing:-0.025em;font-stretch:118%;}
.h1,h1{font-size:clamp(2.75rem,1.6rem + 5.5vw,6.25rem);line-height:0.92;}
.h2,h2{font-size:clamp(2rem,1.3rem + 3.3vw,3.75rem);line-height:1.0;}
.h3,h3{font-size:clamp(1.375rem,1.1rem + 1.3vw,2rem);font-weight:600;font-stretch:112%;line-height:1.15;}
.h4,h4{font-size:clamp(1.125rem,1rem + 0.6vw,1.5rem);font-weight:600;font-stretch:110%;line-height:1.2;}
.body-lg{font-size:clamp(1rem,0.94rem + 0.28vw,1.125rem);}
.caption,small{font-size:clamp(0.8125rem,0.78rem + 0.13vw,0.875rem);font-weight:500;line-height:1.45;}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-1);
  font-size:clamp(0.8125rem,0.78rem + 0.13vw,0.875rem);
  font-weight:600;line-height:1.2;
}
.eyebrow::before{content:"";width:20px;height:2px;background:var(--brand);flex:none;}
.numeral{font-variant-numeric:tabular-nums;}
.prose{max-width:34em;}
.prose p + p{margin-top:1em;}

/* Chrome lettering — echoes the metallic wordmark in the logo. Reserved for
   hero headlines on dark surfaces so it stays a signature, not decoration.
   Falls back to solid chrome-hi wherever background-clip:text is unsupported
   or forced-colors mode is on. */
.text-chrome{
  background-image:var(--chrome-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .text-chrome{color:var(--chrome-hi);-webkit-text-fill-color:currentColor;}
}
@media (forced-colors:active){
  .text-chrome{
    background-image:none;
    color:CanvasText;
    -webkit-text-fill-color:currentColor;
  }
}

/* ---- Section modes ---- */
.on-night{background:var(--ink-900);color:var(--onink-hi);}
.on-night .text-lo,.on-night .eyebrow{color:var(--onink-lo);}
.on-day{background:var(--paper);color:var(--text-hi);}
.on-day.alt{background:var(--paper-2);}
.on-day .text-lo,.on-day .eyebrow{color:var(--text-lo);}
.on-night a:hover{color:var(--brand);}
.on-day a:hover{color:var(--brand-text);}

/* ---- Skip link ---- */
.skip-link{
  position:fixed;top:-100%;left:var(--sp-2);
  background:var(--brand-deep);color:#fff;
  padding:var(--sp-1) var(--sp-2);z-index:calc(var(--z-header) + 10);
  border-radius:var(--r-input);font-weight:600;
  transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{top:var(--sp-2);}

/* ---- 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;
}