/* DJ Mobile Oil Change — design tokens. Import this; never hardcode hexes. */
:root {
  /* palette */
  --navy:        #152A4E;
  --navy-700:    #1E3A68;
  --navy-050:    #F2F5F9;
  /* One step darker than 050, for the pressed state of a wizard option.
     Hover is 050 and a press has to be visibly further than a hover. */
  --navy-100:    #E4EAF3;
  --orange:      #E9691C;
  --orange-600:  #CF5A14;
  --orange-050:  #FDF1EA;
  --slate:       #7D8DA6;
  --white:       #FFFFFF;

  /* semantic */
  --bg:            var(--white);
  --bg-alt:        var(--navy-050);
  --bg-invert:     var(--navy);
  --text:          var(--navy);
  --text-muted:    var(--slate);
  --text-invert:   var(--white);
  --accent:        var(--orange);
  --accent-hover:  var(--orange-600);
  --border:        #DDE4EE;

  /* type */
  /*
    Archivo Variable, self-hosted. 110% on the wdth axis — down from the 125%
    "Expanded" default, which is what Monument could not do and what made a
    variable face the answer. See CLAUDE.md §5.
  */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-display-stretch: 110%;

  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* scale */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --step-2:  clamp(1.56rem, 1.39rem + 0.85vw, 2.07rem);
  --step-3:  clamp(1.95rem, 1.66rem + 1.45vw, 2.84rem);
  --step-4:  clamp(2.44rem, 1.97rem + 2.34vw, 3.9rem);

  /* space + shape */
  --space-1: 0.5rem;  --space-2: 0.75rem; --space-3: 1rem;
  --space-4: 1.5rem;  --space-5: 2.5rem;  --space-6: 4rem;
  --radius:    10px;
  --radius-lg: 18px;
}

/* ---------------------------------------------------------------------------
   SELF-HOSTED, from our own domain. No fonts.googleapis.com at runtime.

   Both faces are SIL Open Font License, which permits self-hosting — the whole
   reason this is possible. Latin subset only: the full variable files carry
   Cyrillic, Greek and Vietnamese we will never set, and together those cost
   284 kB a phone would download and never use.

   Subset ranges are Google's own slicing, taken verbatim, so a character
   outside the range falls back rather than rendering blank.

   Archivo: (c) The Archivo Project Authors. Inter: (c) The Inter Project
   Authors. Both OFL 1.1 — see fonts/OFL.txt.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-variable-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   Monument Extended is NOT a site face. DECIDED 2026-09-01: it works in the
   logo but is unmanageable at headline size on a phone. It stays for the LOGO,
   PRINT and VEHICLE GRAPHICS only.

   The licensed .woff2 files live in fonts/web/ and are deliberately OUT of
   public/, so they are not deployed — we do not ship a licensed font file the
   site never uses. The .otf originals in fonts/ remain the desktop licence.
   --------------------------------------------------------------------------- */