/* Julkee × Lempee — design tokens
   Source of truth: the online brand book (guidelines.html#color, #type)
   and jxl-web.md in the material bank. Drop this file into any JxL web project and build on the
   variables; no component should hard-code these values.
   Pair with jxl-web.md (§4 Motion) for the GSAP side of the motion system. */

:root{
  /* Colour — five colours, one rule */
  --blue:#0B63F6;          /* Julkee Blue */
  --red:#D00931;           /* Lempee Red */
  --black:#000000;         /* Infinity Black */
  --offwhite:#EFEFEF;      /* Off-White */
  --white:#FFFFFF;
  --ink:#000000;
  --muted-on-light:rgba(0,0,0,.62);
  --muted-on-light-soft:rgba(0,0,0,.4);
  --muted-on-dark:rgba(255,255,255,.68);
  --muted-on-dark-soft:rgba(255,255,255,.42);
  --line-on-light:rgba(0,0,0,.12);
  --line-on-dark:rgba(255,255,255,.16);

  /* Type — Work Sans, one family, no exceptions */
  --brand-font:'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Rhythm */
  --max:1280px;
  --gutter:clamp(20px, 5vw, 64px);
  --section-pad:clamp(56px, 9vw, 128px);
  --section-radius:clamp(20px, 3vw, 48px);
  --card-radius:18px;

  /* Motion — two curves, and only two.
     --ease-ui never overshoots: colour, opacity, exits, scroll, layout.
     --ease-spring is for entrances and transforms only. Its fallback
     (below, overridden where linear() is supported) is an easeOutBack. */
  --ease-ui:cubic-bezier(.16, 1, .3, 1);
  --ease-spring:cubic-bezier(.34, 1.56, .64, 1);
  --dur-press:.2s;          /* :active scale .955 */
  --dur-color:.2s;          /* hover/focus colour changes */
  --dur-ui:.5s;             /* label roll, tabs, accordions */
  --dur-enter:.85s;         /* scroll entrances (opacity on its own .3s track) */
}

@supports (transition-timing-function: linear(0, 1)){
  :root{
    --ease-spring:linear(0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1);
  }
}

/* Keyboard focus is always visible; on blue/red grounds it turns white. */
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.bg-blue :focus-visible, .bg-red :focus-visible{ outline-color:var(--white); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}