/* ==========================================================================
   TOKENS — "The Chrome Garage"
   Palette sampled directly from the A&D Mobile Automotive logo artwork:
   obsidian ground, the car's electric blue, the swoosh red, chrome lettering.
   ========================================================================== */

:root{
  /* ---- Ground ---------------------------------------------------------- */
  --obsidian:#05070A;
  --carbon:#0B0F15;
  --graphite:#131922;
  --slate:#1C2430;

  /* ---- Chrome (from the metallic "A&D MOBILE" lettering) --------------- */
  --chrome-100:#F5F7FA;
  --chrome-300:#D3D9E1;
  --chrome-500:#A2ABB8;
  --chrome-700:#6B7482;

  /* ---- Electric blue (the car body). Primary accent. ------------------- */
  --blue-400:#3BA7FF;
  --blue-500:#0A84E8;
  --blue-600:#0765B4;
  --blue-700:#044C8A;
  --blue-glow:rgba(10,132,232,.45);

  /* ---- Racing red (swoosh + "AUTOMOTIVE"). URGENCY ONLY. --------------- */
  --red-400:#FF3B42;
  --red-500:#E01B22;
  --red-600:#B4141A;
  --red-glow:rgba(224,27,34,.40);

  /* ---- Support --------------------------------------------------------- */
  --gold:#FFC442;          /* review stars only */
  --whatsapp:#25D366;
  --open:#3DDC84;
  --closed:#FFB020;

  /* ---- Text ------------------------------------------------------------ */
  --ink:#FFFFFF;
  --ink-2:#C3CBD6;         /* 11.4:1 on --obsidian */
  --ink-3:#8B96A5;         /* 6.1:1  on --obsidian — meets AA for body */

  /* ---- Gradients ------------------------------------------------------- */
  --grad-chrome:linear-gradient(160deg,#FFF 0%,#DCE2EA 42%,#9AA3B0 78%,#EEF2F6 100%);
  --grad-blue:linear-gradient(135deg,#3BA7FF 0%,#0A84E8 48%,#044C8A 100%);
  --grad-red:linear-gradient(135deg,#FF3B42 0%,#E01B22 55%,#8E1015 100%);
  --grad-mesh:
    radial-gradient(60% 80% at 15% 0%,rgba(10,132,232,.22),transparent 60%),
    radial-gradient(50% 60% at 90% 20%,rgba(224,27,34,.10),transparent 60%);
  --grad-plate:linear-gradient(160deg,#FFF 0%,#EAEEF3 55%,#CDD4DC 100%);

  /* ---- Shadows — always layered, never a single flat drop -------------- */
  --sh-1:0 1px 2px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.35);
  --sh-2:0 2px 6px rgba(0,0,0,.5),0 12px 28px rgba(0,0,0,.45),
         inset 0 0 0 1px rgba(255,255,255,.05);
  --sh-3:0 4px 12px rgba(0,0,0,.55),0 24px 60px rgba(0,0,0,.55),
         0 0 42px var(--blue-glow),inset 0 0 0 1px rgba(255,255,255,.07);
  --sh-red:0 4px 12px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.5),0 0 38px var(--red-glow);

  /* ---- Glass ----------------------------------------------------------- */
  --glass:rgba(19,25,34,.62);
  --glass-strong:rgba(11,15,21,.86);
  --glass-line:rgba(255,255,255,.10);
  --blur:saturate(160%) blur(18px);

  /* ---- Type scale (fluid) ---------------------------------------------- */
  --ff-display:"Chakra Petch",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --ff-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --fs-hero:clamp(2.75rem,7vw,6.5rem);
  --fs-h1:clamp(2.25rem,5vw,4rem);
  --fs-h2:clamp(1.85rem,3.6vw,3rem);
  --fs-h3:clamp(1.3rem,2.1vw,1.85rem);
  --fs-h4:clamp(1.08rem,1.5vw,1.3rem);
  --fs-lead:clamp(1.05rem,1.5vw,1.3rem);
  --fs-body:clamp(1rem,1.05vw,1.075rem);
  --fs-sm:clamp(.82rem,.9vw,.9rem);
  --fs-xs:clamp(.72rem,.8vw,.79rem);

  /* ---- Space ----------------------------------------------------------- */
  --sp-1:.25rem;  --sp-2:.5rem;   --sp-3:.75rem;  --sp-4:1rem;
  --sp-5:1.5rem;  --sp-6:2rem;    --sp-7:3rem;    --sp-8:4rem;
  --sp-9:6rem;    --sp-10:8rem;
  --section-y:clamp(4rem,9vw,8rem);
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --maxw:1280px;
  --maxw-narrow:min(68ch,100%);

  /* ---- Radii ----------------------------------------------------------- */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-mech:cubic-bezier(.32,.72,.28,1);   /* damped, like good suspension */
  --t-fast:180ms; --t-mid:280ms; --t-slow:520ms; --t-enter:700ms;

  /* ---- Z-index scale (per ui-ux-pro-max: 10 / 300 / 999 / 9999) -------- */
  --z-base:1; --z-raised:5; --z-sticky:10; --z-header:20;
  --z-drawer:300; --z-dropdown:300; --z-modal:999; --z-toast:9999;
}

/* --------------------------------------------------------------------------
   THEME: this design deliberately commits to a single dark look.

   The chrome-gradient headline fill, the metallic plate, the blue light-bleed
   and the layered black shadows ARE the brand — sampled straight from the logo.
   A light variant does not degrade gracefully (chrome-on-white text disappears),
   so no prefers-color-scheme switch is wired up. Every surface colour above is
   painted explicitly, so the page never inherits a host background.
   -------------------------------------------------------------------------- */
:root{color-scheme:dark}