/* S4 Grappling Series — "Original, optimized" design tokens */
:root {
  /* Grounds */
  --black: #0A0A0C;          /* page background */
  --panel: #111116;          /* alternate sections, cards on black */
  --line: #1F1F26;           /* header/footer/section borders */
  --line-strong: #2A2A33;    /* dividers inside sections */
  --line-button: #3A3A44;    /* outline buttons, dashed empty states */

  /* Text */
  --text: #F7F7F5;           /* headings, primary text */
  --text-muted: #C9C9CF;     /* body copy */
  --text-subtle: #9A9AA3;    /* labels, captions, footer */
  --text-placeholder: #6E6E78; /* photo placeholder captions only */

  /* Red */
  --red: #D30B16;            /* brand red: buttons, "MAT.", card top borders, red panels. White on it = 5.5:1 */
  --red-text: #FF4D52;       /* small red text (eyebrows, 01/02/03) on black/panel. #D30B16 fails as small text (3.6:1) */
  --red-disabled: #5A1015;
  --error-text: #FF8A8D;     /* error messages on dark */
  --error-border: #FF4D52;

  /* Hero glow (their original look, kept subtle) */
  --hero-glow: radial-gradient(circle at 84% 18%, rgba(211, 11, 22, 0.2), rgba(0, 0, 0, 0) 32%);
  --placeholder: repeating-linear-gradient(135deg, #17171D 0 14px, #121217 14px 28px);

  /* Type: Archivo only (self-hosted). */
  --font: 'Archivo', Arial, sans-serif;
  /* Headlines: weight 800, UPPERCASE, letter-spacing -0.045em (cards/rows -0.03em), line-height .9 */
  /* Eyebrows: 12px (11px mobile), weight 700, UPPERCASE, letter-spacing .16em, color --red-text */
  /* Buttons: 13–14px, weight 800, UPPERCASE, letter-spacing .06em */
  /* Logo "S4": Archivo 900 italic, letter-spacing -0.04em, --red */
  --fs-hero: clamp(76px, 11.5vw, 168px);
  --fs-h2: clamp(46px, 6.7vw, 96px);
  --fs-h2-sm: clamp(44px, 5.5vw, 80px);   /* long headlines: sponsors, next event */
  --fs-h3: clamp(26px, 2.6vw, 40px);
  --fs-lead: clamp(17px, 1.5vw, 21px);
  --fs-body: clamp(15px, 1.2vw, 17px);

  /* Layout */
  --gutter: clamp(20px, 4.5vw, 64px);
  --section-y: clamp(64px, 7.8vw, 112px);
  --max-width: 1440px;
  --header-h: clamp(64px, 5.3vw, 76px);
  --control-h: 56px;   /* 52px on phones */
  --radius: 0;         /* square corners everywhere */
}

/* ---- Site additions (not in the kit's tokens.css) ---- */
:root {
  --white: #FFFFFF;          /* text on --red */
  --focus: #F7F7F5;          /* focus ring: visible on black, panel and red */
  --hero-glow-sm: radial-gradient(circle at 90% 8%, rgba(211, 11, 22, 0.2), rgba(0, 0, 0, 0) 45%); /* phone hero (reference 02-mobile) */
  --fs-h2-lead: clamp(44px, 4.5vw, 64px);  /* "Built for athletes. Rooted in community. Driven by the sport." */
  --fs-h2-standings: clamp(46px, 6.7vw, 96px); /* = --fs-h2, smaller on phones */
  --fs-h2-sponsors: clamp(44px, 5.5vw, 80px);  /* = --fs-h2-sm, smaller on phones */
  --fs-row: clamp(30px, 2.8vw, 40px);      /* event row titles, sponsor panel title */
  --fs-card: clamp(26px, 2.25vw, 32px);    /* standings cards */
  --fs-card-lg: clamp(28px, 2.5vw, 36px);  /* about cards */
  --fs-name: clamp(20px, 2.1vw, 30px);     /* leadership names */
  --fs-success: 36px;
  --error-tint: #1A0B0D;     /* fill behind error summaries and an invalid photo field */
  --success-text: #9FE0B4;   /* "ready" check on dark */
}

/* ---- "Slash cut" texture + matchup card (graphics handoff) ---- */
:root {
  /* Grain over the whole page: fractal noise, desaturated, tiled */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-size: 180px;
  --grain-opacity: 0.05;

  /* Two giant ghost slashes behind the hero (logo slash shape) */
  --ghost-slash-red-opacity: 0.1;
  --ghost-slash-light-opacity: 0.06;

  /* Angled cut on the next-event section's top edge, and the red sliver along it */
  --section-cut: 34px;
  --section-cut-sliver: 36px;

  /* Matchup card */
  --matchup-ground: #0A0A0C;
  --matchup-panel: #16070A;
  --matchup-grain-opacity: 0.07;
  --matchup-lean: 0.2126;  /* tan(12°): the divider leans 12° from vertical, like the logo's italic */
}

/* Phones: cap headline sizes by viewport width so the longest words
   ("CHAMPIONSHIP", "SUPERFIGHTS") fit at 320px. Values at 390 match 02-mobile. */
@media (max-width: 699.98px) {
  :root {
    --control-h: 52px;
    --section-cut: 17px;
    --section-cut-sliver: 18px;
    --fs-hero: min(76px, 20vw);
    --fs-h2: min(52px, 13.3vw);        /* events, about, contact */
    --fs-h2-standings: min(46px, 11.5vw);
    --fs-h2-sm: min(48px, 12vw);       /* next event */
    --fs-h2-lead: min(44px, 11.3vw);   /* leadership */
    --fs-h2-sponsors: min(44px, 11.3vw);
  }
}