/* GritPro — "Court Under Lights" design + motion tokens.
   Every colour, size, duration and easing on the site comes from here.
   js/motion.js reads the motion tokens back with getComputedStyle, so this file is the single source. */
:root {
  /* colour */
  --bg: #0A0B09;
  --bg-2: #0D0F0C;
  --surface: #161814;
  --surface-2: #1D2019;
  --line: #363E2A;
  --line-soft: rgba(54, 62, 42, .55);
  --lime: #A6FF00;
  --lime-dim: #6FCC00;
  --lime-glow: rgba(166, 255, 0, .35);
  --lime-wash: rgba(166, 255, 0, .08);
  --text: #F0F3EC;
  --muted: #A0A896;
  --ink: #0A0B09;

  /* type */
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Chivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display-stretch: 78%;
  /* Display sizes grow with the reader's text size (rem) but are capped by the screen width (vw), so a larger
     browser text setting never pushes a headline past the edge. The caps sit above the 100% sizes. */
  --fs-hero: min(clamp(3.9rem, 1.1rem + 9.2vw, 8.25rem), 19.5vw);
  --fs-h2: min(clamp(2.6rem, 1.15rem + 5.1vw, 5.75rem), 14vw);
  --fs-h2-narrow: min(clamp(2.4rem, 1rem + 3.6vw, 4.25rem), 14vw);   /* headlines in a narrow side column */
  --fs-h3: min(clamp(2rem, 1.1rem + 3.4vw, 3.9rem), 15vw);
  --fs-h4: clamp(1.25rem, 1.05rem + .6vw, 1.55rem);
  --fs-lead: clamp(1.02rem, .95rem + .35vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .75rem;
  --lh-display: .92;
  --lh-body: 1.62;
  --track-eyebrow: .16em;

  /* layout */
  --wrap: 1200px;
  --gutter: clamp(20px, 5.6vw, 80px);
  --nav-h: 72px;
  --sp-xl: clamp(88px, 8vw, 120px);
  --sp-lg: clamp(64px, 6vw, 96px);
  --sp-md: clamp(48px, 5vw, 80px);
  --sp-sm: clamp(24px, 2.4vw, 36px);
  --r-btn: 4px;
  --r-card: 14px;
  --r-frame: 16px;
  --r-pill: 999px;

  /* depth */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 24px 48px -28px rgba(0, 0, 0, .9);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 36px 70px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(166, 255, 0, .45);
  --glow-lime: 0 0 32px rgba(166, 255, 0, .35), 0 0 2px rgba(166, 255, 0, .9);

  /* motion — five durations, four easings, three travel distances */
  --dur-instant: 120ms;
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 500ms;
  --dur-hero: 800ms;
  --dur-scroll: 1100ms;    /* Lenis glide for wheel + anchor scrolls */
  --dur-ambient: 4.8s;     /* slow ambient loops only: light-bar pulse, idle float */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --move-sm: 8px;
  --move-md: 24px;
  --move-lg: 48px;
  --stagger: 70ms;
  --stagger-max: 6;
  --depth-bg: .15;
  --depth-mid: .4;
  --depth-fg: 1;
  /* the preloader: desktop cap 1.8 s, mobile cap 1.2 s (see site.css) */
  --intro-total: 1.3s;
}

@media (max-width: 767px) {
  :root {
    --nav-h: 60px;
    --intro-total: .95s;
  }
}