/*
Theme Name: Broadfording Athletics
Theme URI: https://broadfording.com/athletics
Description: Official Global Vision Christian School Broadfording Athletics site — Broadfording Lions
Author: Global Vision Christian School Broadfording
Version: 1.0
Tags: athletics, sports, responsive, custom-background, custom-logo
Text Domain: broadfording-athletics
*/

/* =============================================================
   BROADFORDING LIONS ATHLETICS — DESIGN TOKENS
   ============================================================= */

@font-face {
  font-family: "Monument Extended";
  src: url("assets/fonts/MonumentExtended-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Monument Extended";
  src: url("assets/fonts/MonumentExtended-Ultrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rac One Swan";
  src: url("assets/fonts/RAC1SWAN.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand Core Palette ------------------------------------ */
  --bca-royal:        #006BB6;
  --bca-royal-deep:   #00508B;
  --bca-royal-ink:    #002A4A;
  --bca-gold:         #CE9300;
  --bca-gold-bright:  #F2B100;
  --bca-gold-soft:    #F5D780;

  /* --- Neutrals ---------------------------------------------- */
  --bca-black:        #0A0A0C;
  --bca-charcoal:     #2A2D33;
  --bca-slate:        #5B6068;
  --bca-steel:        #9CA2AB;
  --bca-fog:          #E4E6EA;
  --bca-bone:         #F4F3EE;
  --bca-white:        #FFFFFF;

  /* --- Semantic ---------------------------------------------- */
  --win:              #2E8540;
  --loss:             #B3261E;
  --tie:              #7A6B3A;

  /* --- Type Families ----------------------------------------- */
  --ff-display:  "Monument Extended", "Helvetica Neue", Arial, sans-serif;
  --ff-varsity:  "Rac One Swan", "Playfair Display", Georgia, serif;
  --ff-body:     ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- Type Scale -------------------------------------------- */
  --fs-7xl: clamp(72px, 9vw, 168px);
  --fs-6xl: clamp(56px, 7vw, 120px);
  --fs-5xl: clamp(44px, 5vw, 84px);
  --fs-4xl: 56px;
  --fs-3xl: 40px;
  --fs-2xl: 28px;
  --fs-xl:  22px;
  --fs-lg:  18px;
  --fs-md:  16px;
  --fs-sm:  14px;
  --fs-xs:  12px;

  /* --- Tracking ---------------------------------------------- */
  --tr-mega:    0.02em;
  --tr-tight:  -0.01em;
  --tr-label:   0.12em;
  --tr-eyebrow: 0.28em;

  /* --- Spacing (4px base) ------------------------------------ */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* --- Radii ------------------------------------------------- */
  --r-0:   0;
  --r-1:   2px;
  --r-2:   4px;
  --r-3:   8px;
  --r-pill:999px;

  /* --- Shadows ----------------------------------------------- */
  --sh-1: 0 1px 2px rgba(0,42,74,.08), 0 1px 1px rgba(0,42,74,.04);
  --sh-2: 0 4px 14px rgba(0,42,74,.12), 0 2px 4px rgba(0,42,74,.06);
  --sh-3: 0 18px 40px rgba(0,42,74,.18), 0 6px 12px rgba(0,42,74,.08);
  --sh-inset: inset 0 0 0 2px var(--bca-gold);

  /* --- Layout ------------------------------------------------ */
  --max-w: 1280px;
  --nav-h: 72px;
  --ticker-h: 44px;
}

/* =============================================================
   Type utilities
   ============================================================= */
.t-display {
  font-family: var(--ff-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tr-mega);
  line-height: 0.92;
}
.t-varsity {
  font-family: var(--ff-varsity);
  font-style: italic;
  line-height: 0.92;
  text-transform: uppercase;
}
.t-eyebrow {
  font-family: var(--ff-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  font-size: var(--fs-xs);
}
.t-label {
  font-family: var(--ff-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  font-size: var(--fs-sm);
}
.t-body {
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--bca-charcoal);
}
.t-stat {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-6xl);
  line-height: 0.85;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   Brand helpers
   ============================================================= */
.bg-royal   { background: var(--bca-royal);     color: var(--bca-white); }
.bg-ink     { background: var(--bca-royal-ink); color: var(--bca-white); }
.bg-gold    { background: var(--bca-gold);      color: var(--bca-royal-ink); }
.bg-bone    { background: var(--bca-bone);      color: var(--bca-royal-ink); }
.bg-black   { background: var(--bca-black);     color: var(--bca-white); }
.bg-white   { background: var(--bca-white);     color: var(--bca-royal-ink); }

.c-royal { color: var(--bca-royal); }
.c-gold  { color: var(--bca-gold); }
.c-ink   { color: var(--bca-royal-ink); }

/* Diagonal gold accent stripe — signature brand mark */
.hash-rule {
  height: 6px;
  background: repeating-linear-gradient(
    135deg,
    var(--bca-gold) 0 14px,
    transparent 14px 22px
  );
}