/* jlauto tokens. Every value traced to the Carrepair X Webflow CSS (:root vars +
 * the style guide). Colors are exact hex; sizes are fluid clamp() with the
 * Webflow desktop px as the max and a phone-safe min. rem = 16px. */
@layer tokens {
  :root {
    /* ---- colour, exact from the template :root ---- */
    --jl-color-n100: #ffffff;
    --jl-color-n200: #f4f4f4;
    --jl-color-n300: #ececec;
    --jl-color-n400: #d2d2d2;
    --jl-color-n500: #939393;
    --jl-color-n600: #4f4f4f;
    --jl-color-n700: #2b2b2b;
    --jl-color-n800: #000000;
    --jl-color-accent: #1557ff;
    --jl-color-accent-hover: #0f45d1;
    /* accent on black is 3.84:1; small text on dark surfaces uses this 5.8:1 tint (verifier F14) */
    --jl-color-accent-on-dark: #4d7fff;
    --jl-color-green: #05c168;
    --jl-color-green-dark: #11845b;
    --jl-color-red: #dc2b2b;
    --jl-color-orange: #ff9e2c;

    /* semantic aliases */
    --jl-color-text: var(--jl-color-n600);
    --jl-color-text-soft: var(--jl-color-n500);
    --jl-color-heading: var(--jl-color-n800);
    --jl-color-border: var(--jl-color-n400);
    --jl-color-border-dark: var(--jl-color-n600);
    --jl-color-surface: var(--jl-color-n100);
    --jl-color-surface-alt: var(--jl-color-n200);
    --jl-color-dark: var(--jl-color-n800);
    --jl-color-on-dark: var(--jl-color-n100);
    --jl-color-on-dark-soft: var(--jl-color-n300);

    /* shadows: #14142b at 06/08/10/14/16/24 %, button shadow #1557ff at 06/08/12 % */
    --jl-shadow-1: 0 2px 7px 0 #14142b0f;
    --jl-shadow-2: 0 2px 12px 0 #14142b14;
    --jl-shadow-3: 0 8px 28px 0 #14142b1a;
    --jl-shadow-4: 0 14px 42px 0 #14142b24;
    --jl-shadow-5: 0 24px 65px 0 #14142b29;
    --jl-shadow-button: 0 4px 10px 0 #14142b0a;
    --jl-shadow-button-accent: 0 4px 10px 0 #1557ff14;

    /* ---- type ---- */
    --jl-font: 'THICCCBOI', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --jl-fw-regular: 400;
    --jl-fw-medium: 500;
    --jl-fw-bold: 700;
    --jl-fw-xbold: 800;
    --jl-fw-black: 900;

    /* fluid scale: max = Webflow desktop px, min = 360px phone. Slope tuned so the
     * desktop value lands at about 1280px viewport. */
    --jl-fs-display-1: clamp(2.5rem, 1.25rem + 5.5vw, 5.625rem);   /* 90 → 40 */
    --jl-fs-display-2: clamp(2.25rem, 1.35rem + 4vw, 4.5rem);       /* 72 → 36 */
    --jl-fs-h1: clamp(1.875rem, 1.1rem + 3.5vw, 4.0625rem);         /* 65 → 30 */
    --jl-fs-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.375rem);           /* 38 → 28 (template h2) */
    --jl-fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);            /* 24 → 20 */
    --jl-fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);        /* 22 → 18 */
    --jl-fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);              /* 24 → 18 */
    --jl-fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);          /* 18 → 16 */
    --jl-fs-sm: 1rem;                                               /* 16 */
    --jl-fs-xs: 0.875rem;                                           /* 14 */
    --jl-fs-bg-text: clamp(4rem, 2rem + 5vw, 6.5rem);               /* 120px watermark */

    --jl-lh-tight: 1.1;
    --jl-lh-display: 1.044;
    --jl-lh-heading: 1.2;
    --jl-lh-h2: 1.316;
    --jl-lh-h3: 1.3;
    --jl-lh-body: 1.667;
    --jl-lh-lg: 1.583;

    --jl-tracking-button: 0.06em;
    --jl-tracking-label: 0.15em;

    /* ---- space ---- */
    --jl-space-1: 0.25rem;
    --jl-space-2: 0.5rem;
    --jl-space-3: 0.75rem;
    --jl-space-4: 1rem;
    --jl-space-5: 1.5rem;
    --jl-space-6: 2rem;
    --jl-space-7: 2.5rem;
    --jl-space-8: 3rem;
    --jl-space-9: 4rem;
    --jl-space-10: 5rem;
    --jl-space-11: 6rem;
    --jl-space-12: 8rem;

    --jl-gap: clamp(1.5rem, 1rem + 1.5vw, 2rem);
    --jl-gap-lg: clamp(2rem, 1rem + 4vw, 4rem);
    --jl-block-gap: clamp(2rem, 1rem + 4vw, 5rem);
    /* section padding: 190px desktop → 72px phone */
    --jl-section-pad: clamp(4.5rem, 3rem + 8vw, 11.875rem);
    --jl-section-pad-tight: clamp(3rem, 2rem + 5vw, 7.5rem);
    /* the template's angled white wedge under the hero / over the footer */
    --jl-wedge-h: clamp(2.5rem, 2rem + 3vw, 5rem);

    /* ---- layout ---- */
    --jl-container: 85rem;                                          /* 1360px (Sten 2026-09-04: 1266 read too narrow at 1440) */
    --jl-container-narrow: 53rem;                                   /* 848px */
    --jl-gutter: clamp(1.25rem, 1rem + 1vw, 1.5rem);                /* 20 → 24px */
    --jl-nav-h: 5.5rem;
    --jl-callbar-h: 4rem;
    --jl-tap: 2.75rem;                                              /* 44px targets */

    /* ---- shape ---- */
    --jl-radius: 0;
    --jl-radius-pill: 999px;
    --jl-border: 1px;
    --jl-border-button: 1.5px;

    /* ---- motion ---- */
    --jl-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --jl-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --jl-dur: 0.3s;
    --jl-dur-slow: 0.7s;
    --jl-lift: -3px;

    /* ---- z ---- */
    --jl-z-nav: 100;
    --jl-z-drawer: 110;
    --jl-z-callbar: 90;
    --jl-z-skip: 200;
  }

  @media (max-width: 991px) {
    :root { --jl-nav-h: 4.5rem; }
  }
}