/* ==========================================================================
   Clutch Auto Transport — Design Tokens
   Palette sampled directly from the live site's signature stripe graphic
   (stripe-cropped-rectangle_corners-transparent.png). Do not invent colors.
   ========================================================================== */

:root {
  /* --- Brand palette: the five stripe colors, in stripe order --------------- */
  --c-navy:      #13538A;  /* primary. buttons, links, brand surfaces          */
  --c-blue:      #2C92D5;  /* secondary                                        */
  --c-sky:       #37C9EF;  /* accent. rules, icons, highlights                 */
  --c-teal:      #3EDAD8;  /* accent                                           */
  --c-aqua:      #86EAE9;  /* light accent, tints                              */

  /* --- Extended neutrals derived from the navy ----------------------------- */
  --c-ink:       #0B2542;  /* darkest. dark sections, headings                 */
  --c-ink-2:     #123253;  /* dark section gradient partner                    */
  --c-slate:     #3D5570;  /* body copy on light                               */
  /* Darkened from #6B7F96 (2026-09-04): the original scored 4.12 on white and
     3.86 on --c-surface, failing WCAG AA for normal text everywhere it was
     used (ledes, breadcrumbs, card meta, credential labels). This value
     passes on white (5.11), surface (4.80) and surface-2 (4.52). */
  --c-mute:      #5B7086;  /* secondary copy, labels                           */
  --c-line:      #DCE4ED;  /* hairline borders                                 */
  --c-line-soft: #EDF2F7;
  --c-surface:   #F5F8FB;  /* tinted section background                        */
  --c-surface-2: #EAF2F9;
  --c-white:     #FFFFFF;

  /* --- Semantic ------------------------------------------------------------ */
  --c-text:        var(--c-slate);
  --c-heading:     var(--c-ink);
  --c-link:        var(--c-navy);
  --c-link-hover:  #0E4270;
  --c-bg:          var(--c-white);

  /* Deep-sky, used for numerals and small text that must pass contrast on
     white. Raw --c-sky is too light for text. */
  --c-sky-deep:  #0E7AA8;

  /* --- Type ---------------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid scale: min at 360px, max at 1280px */
  --t-xs:   0.78rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   clamp(1.06rem, 0.99rem + 0.30vw, 1.19rem);
  --t-xl:   clamp(1.25rem, 1.13rem + 0.52vw, 1.5rem);
  --t-2xl:  clamp(1.5rem,  1.31rem + 0.83vw, 1.95rem);
  --t-3xl:  clamp(1.85rem, 1.51rem + 1.48vw, 2.6rem);
  --t-4xl:  clamp(2.2rem,  1.66rem + 2.35vw, 3.4rem);
  --t-5xl:  clamp(2.5rem,  1.75rem + 3.26vw, 4.1rem);

  --lh-tight: 1.12;
  --lh-snug:  1.28;
  --lh-body:  1.65;

  --tracking-eyebrow: 0.14em;

  /* --- Space (8pt) --------------------------------------------------------- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9: 4rem;    --s-10: 5rem;   --s-11: 6.5rem; --s-12: 8rem;

  /* Section rhythm shrinks on small screens */
  --section-y: clamp(3.25rem, 2.2rem + 4.6vw, 6.5rem);

  /* --- Layout -------------------------------------------------------------- */
  --container:      1200px;
  --container-wide: 1360px;
  --container-prose: 720px;

  /* --- Radius & elevation -------------------------------------------------- */
  --r-sm: 6px;  --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 37, 66, .06),
               0 1px 3px rgba(11, 37, 66, .05);
  --shadow-md: 0 4px 6px -1px rgba(11, 37, 66, .07),
               0 10px 24px -6px rgba(11, 37, 66, .10);
  --shadow-lg: 0 12px 28px -8px rgba(11, 37, 66, .16),
               0 30px 60px -20px rgba(11, 37, 66, .18);

  /* --- Motion -------------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .22s;

  /* --- The signature element ----------------------------------------------- */
  /* The five-color diagonal stripe. Used as a 6px rule under the header,
     at the top of the footer CTA, and as a section divider. */
  --stripe: linear-gradient(
      100deg,
      var(--c-navy) 0 20%,
      var(--c-blue) 20% 40%,
      var(--c-sky)  40% 60%,
      var(--c-teal) 60% 80%,
      var(--c-aqua) 80% 100%);

  --header-h: 76px;
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
}