/* =============================================================================
   HACKERS G.C. — DESIGN TOKENS
   Mobile-first. Every size is fluid between a 360px phone and a 1600px screen.
============================================================================= */

:root {
  /* ---- paper & ink ------------------------------------------------------
     White and stone grounds keep the lime/black club palette crisp. */
  --paper:      #FFFFFF;
  --paper-2:    #F6F6F4;
  --paper-3:    #ECECE9;
  --paper-4:    #DADAD5;

  /* Every ink below is measured against white:
     ink-3 7.6:1 (AAA) · ink-4 5.1:1 (AA) · ink-5 3.4:1 (decorative / large only) */
  --ink:        #101010;   /* 19.0:1 */
  --ink-2:      #2E2E2E;   /* 13.6:1 */
  --ink-3:      #4F4F4F;   /*  8.2:1 on white, 7.5:1 on the off-white bars */
  --ink-4:      #666666;   /*  5.7:1 */
  --ink-5:      #8C8C8C;   /*  3.4:1 — never for small body text */

  --night:      #0C0C0C;
  --night-2:    #161616;
  --night-3:    #222222;

  --line:       rgba(16, 16, 16, 0.12);
  --line-2:     rgba(16, 16, 16, 0.24);
  --line-dark:  rgba(255, 255, 255, 0.15);

  /* ---- accent -------------------------------------------------------------
     Legacy variable names are retained so older templates inherit the new
     visual system without a markup migration. They now resolve to club lime. */
  --gold:       #C8FF3D;
  --gold-ink:   #344700;
  --gold-2:     #DFFF91;
  --gold-3:     #EEFFC4;
  --gold-soft:  rgba(200, 255, 61, 0.18);

  /* ---- landing-page editorial system ------------------------------------
     Kept separate from the score and match colours so the premium home can
     feel distinctive without changing the functional tournament screens. */
  --club-acid:      #C8FF3D;
  --club-acid-2:    #ACEC16;
  --club-stone:     #F3F4EF;
  --club-night:     #10140F;
  --club-radius:    24px;
  --club-radius-lg: 34px;
  --club-shadow:    0 30px 80px -42px rgba(16, 20, 15, 0.42);

  /* ---- teams ------------------------------------------------------------
     Impala owns the energetic club lime; Eland is the black/charcoal side. */
  --impala:      #C8FF3D;
  --impala-2:    #DFFF91;
  --impala-soft: rgba(200, 255, 61, 0.20);
  --impala-wash: rgba(200, 255, 61, 0.34);
  --impala-ink:  #344700;

  --eland:       #10140F;
  --eland-2:     #C7CEC4;
  --eland-soft:  rgba(16, 20, 15, 0.12);
  --eland-wash:  rgba(16, 20, 15, 0.30);
  --eland-ink:   #10140F;
  --eland-on-dark: #F3F4EF;

  /* ---- semantic --------------------------------------------------------- */
  --live:      #C8482F;     /* 4.8:1 on white — fills and borders */
  --live-ink:  #A6301A;     /* 5.8:1 on the soft red pill background */
  --live-soft: rgba(200, 72, 47, 0.12);
  --win:       #1D6B4F;
  --halve:     #666666;

  /* ---- type ------------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;

  /* Fluid scale — 360px .. 1400px */
  --t-hero:  clamp(3.25rem, 13.5vw, 10.5rem);
  --t-d1:    clamp(2.35rem, 7.2vw, 5.25rem);
  --t-d2:    clamp(1.6rem, 4.6vw, 3.35rem);
  --t-d3:    clamp(1.4rem, 3vw, 2.1rem);
  --t-h1:    clamp(1.2rem, 2.1vw, 1.55rem);
  --t-h2:    clamp(1.02rem, 1.6vw, 1.2rem);
  --t-body:  clamp(0.95rem, 1.1vw, 1.03rem);
  --t-small: 0.875rem;   /* 14px  */
  --t-micro: 0.75rem;    /* 12px — the floor for any label on the site */
  --t-nano:  0.6875rem;  /* 11px — absolute minimum, used sparingly */

  /* Uppercase tracking. 0.22em on 12px text set every label three words wide
     and made the page feel shouted; 0.1em still reads as a label. */
  --track-eyebrow: 0.1em;
  --track-label:   0.07em;
  --track-display: -0.035em;

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

  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --maxw: 1440px;
  --maxw-text: 62ch;

  --section-y: clamp(3.5rem, 9vw, 8rem);

  /* ---- form ------------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  --tap: 48px;              /* minimum touch target */

  --shadow-1: 0 1px 2px rgba(18, 18, 15, 0.06);
  --shadow-2: 0 8px 30px -12px rgba(18, 18, 15, 0.28);
  --shadow-3: 0 24px 70px -30px rgba(18, 18, 15, 0.45);

  /* ---- motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 460ms;
  --dur-4: 900ms;

  --nav-h: 62px;
}

@media (min-width: 900px) {
  :root { --nav-h: 78px; }
}

/* Anyone who has asked their OS to calm things down gets a still page. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}