/* ==========================================================================
   HOOPLAB — DESIGN TOKENS  ·  Source of truth
   Built only from HoopLab Brand Book Vol.01 + the HoopLab Logo Kit.
   Run it. Rep it. Own it. — Basketball, tested.
   Import this file everywhere. Never hardcode a hex or font family.
   Fonts load from Google Fonts (@import below). No build step.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Knewave&family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- CORE PALETTE (brand book §04) ---------------------------------- */
  --hl-navy:    #16263F;  /* Court Navy   — base / backgrounds (the floor)   */
  --hl-orange:  #F0772E;  /* Court Orange — hero / CTAs (the one loud thing) */
  --hl-teal:    #15BFA3;  /* Lab Teal     — spark / data & tags             */
  --hl-cream:   #FBF8F2;  /* Chalk Cream  — ink-on-paper ONLY (print)       */

  /* ---- EXTENDED DARK SURFACES (brand book :root) ---------------------- */
  --hl-asphalt: #0E1726;  /* deeper than navy — primary deep background      */
  --hl-ink:     #080D16;  /* near-black — wells, code blocks, footers        */
  --hl-off:     #EDF0F4;  /* off-white — default text on dark                */
  --hl-concrete:   #C6CCD5; /* light neutral surface / muted UI on light     */
  --hl-concrete-d: #AAB2BE; /* concrete, one step darker                     */

  /* ---- INK ON ACCENTS (contrast-safe pairings) ----------------------- */
  --hl-on-orange: #16263F;  /* navy ink reads cleanest on orange            */
  --hl-on-teal:   #05201B;  /* deep green ink on teal                       */
  --hl-on-cream:  #16263F;  /* navy ink on cream paper                      */

  /* ---- SEMANTIC ROLES ------------------------------------------------- */
  --hl-bg:         var(--hl-asphalt);
  --hl-bg-raised:  var(--hl-navy);
  --hl-bg-well:    var(--hl-ink);
  --hl-text:       var(--hl-off);
  --hl-text-muted: rgba(237,240,244,.78);
  --hl-text-faint: rgba(237,240,244,.55);
  --hl-hero:       var(--hl-orange);
  --hl-spark:      var(--hl-teal);
  --hl-line:       rgba(255,255,255,.14);
  --hl-line-soft:  rgba(255,255,255,.08);
  --hl-danger:     #a32a18;  /* misuse / error red (brand book §03)         */

  /* ---- TYPE FAMILIES (brand book §05) -------------------------------- */
  --hl-font-brush: 'Knewave', cursive;                            /* display */
  --hl-font-body:  'Bricolage Grotesque', system-ui, sans-serif;  /* body/UI */
  --hl-font-mono:  'Space Mono', ui-monospace, monospace;         /* stats   */

  /* ---- TYPE SCALE ----------------------------------------------------- */
  --hl-display: clamp(54px, 12vw, 150px); /* hero brush headline (h2.brush)  */
  --hl-h1:      clamp(40px, 8vw, 96px);
  --hl-h2:      clamp(30px, 5vw, 56px);
  --hl-h3:      27px;
  --hl-lead:    clamp(17px, 2vw, 21px);
  --hl-body:    16px;
  --hl-small:   14px;
  --hl-eyebrow: 12px;

  /* ---- TRACKING ------------------------------------------------------- */
  --hl-track-eyebrow: .34em;
  --hl-track-kicker:  .22em;
  --hl-track-tag:     .14em;

  /* ---- RADII (brand reads sharp/torn, not pill-soft) ----------------- */
  --hl-radius-sm:   4px;
  --hl-radius-md:   8px;
  --hl-radius-lg:   14px;
  --hl-radius-pill: 999px;

  /* ---- SPACING -------------------------------------------------------- */
  --hl-space-1: 4px;  --hl-space-2: 8px;  --hl-space-3: 12px;
  --hl-space-4: 16px; --hl-space-5: 24px; --hl-space-6: 32px;
  --hl-space-7: 48px; --hl-space-8: 64px; --hl-space-9: 90px;

  /* ---- ELEVATION ------------------------------------------------------ */
  --hl-shadow-logo: drop-shadow(0 30px 70px rgba(0,0,0,.6));
  --hl-shadow-card: 0 8px 30px rgba(0,0,0,.35);

  /* ---- MOTION --------------------------------------------------------- */
  --hl-ease: cubic-bezier(.2,.8,.2,1);
  --hl-fast: 120ms;
  --hl-base: 220ms;

  /* ---- TEXTURE (lifted verbatim from the brand book :root) ----------- */
  /* Film grain — fixed full-screen overlay, mix-blend overlay, ~.5 opacity */
  --hl-grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%220.55%22/%3E%3C/svg%3E");
  /* Asphalt spray — soft-light noise on dark pages */
  --hl-spray: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22300%22%20height%3D%22300%22%3E%3Cfilter%20id%3D%22s%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.012%200.016%22%20numOctaves%3D%223%22%20seed%3D%227%22/%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23s%29%22%20opacity%3D%220.5%22/%3E%3C/svg%3E");
}

/* ==========================================================================
   BASE
   ========================================================================== */
.hl-root,
.hl-body {
  font-family: var(--hl-font-body);
  background: var(--hl-bg);
  color: var(--hl-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   TYPE HELPERS
   ========================================================================== */
.hl-brush   { font-family: var(--hl-font-brush); font-weight: 400; line-height: .9; letter-spacing: 1px; padding-bottom: .14em; }
.hl-display { font-family: var(--hl-font-brush); font-weight: 400; font-size: var(--hl-display); line-height: .98; }
.hl-display--hero  { color: var(--hl-orange); }
.hl-display--spark { color: var(--hl-teal); }
.hl-h2      { font-family: var(--hl-font-brush); font-size: var(--hl-h2); line-height: .98; }
.hl-h3      { font-family: var(--hl-font-brush); font-size: var(--hl-h3); font-weight: 400; letter-spacing: .5px; }

.hl-eyebrow { font-family: var(--hl-font-mono); font-size: var(--hl-eyebrow); letter-spacing: var(--hl-track-eyebrow); text-transform: uppercase; font-weight: 700; }
.hl-kicker  { font-family: var(--hl-font-mono); font-size: 12.5px; letter-spacing: var(--hl-track-kicker); text-transform: uppercase; opacity: .7; }
.hl-stat    { font-family: var(--hl-font-mono); font-weight: 700; letter-spacing: .04em; }

.hl-lead  { font-size: var(--hl-lead); max-width: 60ch; font-weight: 500; }
.hl-muted { opacity: .78; }

/* ==========================================================================
   TAGS / PILLS  (brand book .tag — rotate ~-2deg is on-brand)
   ========================================================================== */
.hl-tag       { display: inline-block; font-family: var(--hl-font-mono); font-size: 11px; font-weight: 700; letter-spacing: var(--hl-track-tag); text-transform: uppercase; padding: 6px 12px; background: var(--hl-orange); color: var(--hl-on-orange); }
.hl-tag--teal { background: var(--hl-teal); color: var(--hl-on-teal); }
.hl-tag--out  { background: transparent; border: 2px solid currentColor; color: inherit; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.hl-btn { font-family: var(--hl-font-body); font-weight: 700; font-size: var(--hl-body); padding: 12px 22px; border: 0; border-radius: var(--hl-radius-md); cursor: pointer; transition: transform var(--hl-fast) var(--hl-ease), filter var(--hl-fast) var(--hl-ease); }
.hl-btn:active { transform: translateY(1px); }
.hl-btn--primary { background: var(--hl-orange); color: var(--hl-on-orange); }
.hl-btn--primary:hover { filter: brightness(1.06); }
.hl-btn--spark   { background: var(--hl-teal); color: var(--hl-on-teal); }
.hl-btn--ghost   { background: transparent; color: var(--hl-text); border: 2px solid var(--hl-line); }

/* ==========================================================================
   CARD
   ========================================================================== */
.hl-card { background: var(--hl-bg-raised); border: 2px solid var(--hl-line); border-radius: var(--hl-radius-lg); padding: var(--hl-space-5); box-shadow: var(--hl-shadow-card); }

/* ==========================================================================
   SURFACES
   ========================================================================== */
.hl-surface-navy    { background: var(--hl-navy);    color: var(--hl-off); }
.hl-surface-asphalt { background: var(--hl-asphalt); color: var(--hl-off); }
.hl-surface-orange  { background: var(--hl-orange);  color: var(--hl-on-orange); }
.hl-surface-teal    { background: var(--hl-teal);    color: var(--hl-on-teal); }
.hl-surface-cream   { background: var(--hl-cream);   color: var(--hl-on-cream); }

/* ==========================================================================
   TEXTURE & SIGNATURE LAYOUT (brand book)
   ========================================================================== */
/* Film grain — add class to <body>; renders a fixed overlay */
.hl-grain::after { content: ""; position: fixed; inset: 0; background-image: var(--hl-grain); background-size: 220px 220px; mix-blend-mode: overlay; opacity: .5; pointer-events: none; z-index: 9999; }

/* Asphalt spray — add to a dark section; renders a soft-light layer */
.hl-spray { position: relative; }
.hl-spray::before { content: ""; position: absolute; inset: 0; background-image: var(--hl-spray); background-size: cover; mix-blend-mode: soft-light; opacity: .7; pointer-events: none; }

/* Torn bottom edge — signature HoopLab section break */
.hl-torn { clip-path: polygon(0 0,100% 0,100% 96%,96% 99%,90% 96.5%,83% 99.2%,75% 96%,67% 99%,58% 96.4%,49% 99.3%,40% 96.2%,31% 99%,22% 96.6%,14% 99.2%,7% 96.5%,0 99%); }

/* Spray bar — dashed orange energy rule under hero marks */
.hl-spraybar { height: 8px; background: repeating-linear-gradient(90deg, var(--hl-orange) 0 38px, transparent 38px 50px); opacity: .9; }

/* Ghost word — huge outlined brush word bleeding off an edge, behind content */
.hl-ghost { position: absolute; font-family: var(--hl-font-brush); color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.07); font-size: 34vw; line-height: .8; z-index: 0; pointer-events: none; user-select: none; white-space: nowrap; }

/* Framed image — orange corner ticks, slight rotate */
.hl-frame { position: relative; border: 3px solid var(--hl-line); background: var(--hl-asphalt); overflow: hidden; }
.hl-frame img { display: block; width: 100%; }
.hl-frame .hl-corner { position: absolute; width: 10px; height: 10px; background: var(--hl-orange); }
.hl-frame .hl-corner.tl { top: -3px; left: -3px; }
.hl-frame .hl-corner.tr { top: -3px; right: -3px; }
.hl-frame .hl-corner.bl { bottom: -3px; left: -3px; }
.hl-frame .hl-corner.br { bottom: -3px; right: -3px; }