/* =========================================================================
   Sue's Angels FC — Colors & Type Foundations
   Dark premium football aesthetic. Volt yellow + deep navy.
   ========================================================================= */

/* -- Brand fonts ----------------------------------------------------------
   Anton        — display, matches the badge wordmark
   Bebas Neue   — condensed numerals & scoreline display
   Manrope      — UI / body, athletic-modern, distinctive g/a
   JetBrains Mono — tabular figures (tables, kickoff times, stats)
   ------------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* ---------------------------------------------------------------------
     COLOR SYSTEM
     --------------------------------------------------------------------- */

  /* Brand — Volt + Navy (sampled from the real club badge) */
  --volt:           #D6F23A;   /* primary accent — sampled from the badge wings */
  --volt-glow:      #E2FB60;   /* hover / glow ramp */
  --volt-deep:      #B8D425;   /* pressed state */
  --volt-on:        #071D29;   /* text on volt fills (navy) */

  --navy:           #071D29;   /* deep navy — sampled from the badge shield */
  --navy-deep:      #03121C;   /* near-black — page bg in dark mode */
  --navy-rise:      #0D2A3B;   /* surface 1 — cards on navy */
  --navy-rise-2:    #143849;   /* surface 2 — hovered cards / inputs */

  --white:          #FFFFFF;
  --off-white:      #F2F4F7;

  /* Surface (dark mode is the default; the site lives in the dark) */
  --bg:             var(--navy-deep);
  --surface-1:      var(--navy);
  --surface-2:      var(--navy-rise);
  --surface-3:      var(--navy-rise-2);

  /* Text on dark */
  --fg-1:           #FFFFFF;             /* headlines, primary text */
  --fg-2:           #C9D2E0;             /* body */
  --fg-3:           #8593AB;             /* muted, metadata */
  --fg-4:           #4B5773;             /* disabled, lowest emphasis */
  --fg-on-volt:     var(--volt-on);      /* navy text on volt fills */

  /* Borders & dividers */
  --hairline:       rgba(255,255,255,0.08);
  --hairline-strong:rgba(255,255,255,0.16);
  --hairline-volt:  rgba(216,255,0,0.32);

  /* Semantic — result indicators */
  --win:            #25E27B;     /* W — green */
  --draw:           #F2C744;     /* D — amber */
  --loss:           #FF4D5E;     /* L — red */
  --live:           #FF2D55;     /* LIVE pulse */
  --info:           #4DA3FF;

  /* Tier accents for sponsors */
  --tier-gold:      #E8C57A;
  --tier-silver:    #B8C3CF;
  --tier-bronze:    #C08358;

  /* Glow & elevation (used sparingly — see VISUAL FOUNDATIONS) */
  --glow-volt-sm:   0 0 16px rgba(214,242,58,0.40);
  --glow-volt-md:   0 0 32px rgba(214,242,58,0.50);
  --glow-volt-lg:   0 0 64px rgba(214,242,58,0.60);
  --shadow-card:    0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px -16px rgba(0,0,0,0.55);
  --shadow-sticky:  inset 0 -1px 0 var(--hairline);

  /* Protection gradients — used over imagery to keep text legible */
  --grad-protect-b: linear-gradient(180deg, rgba(3,18,28,0) 0%, rgba(3,18,28,0.4) 40%, rgba(3,18,28,0.95) 100%);
  --grad-protect-t: linear-gradient(0deg, rgba(3,18,28,0) 0%, rgba(3,18,28,0.4) 40%, rgba(3,18,28,0.95) 100%);
  --grad-hero:      linear-gradient(160deg, rgba(3,18,28,0.2) 0%, rgba(3,18,28,0.55) 55%, rgba(3,18,28,0.92) 100%);
  --grad-volt-edge: linear-gradient(90deg, var(--volt) 0%, var(--volt-glow) 100%);

  /* ---------------------------------------------------------------------
     TYPE SYSTEM
     --------------------------------------------------------------------- */

  /* Families */
  --font-display:   'Anton', 'Bebas Neue', 'Impact', 'Helvetica Neue', sans-serif;
  --font-stat:      'Bebas Neue', 'Anton', 'Impact', sans-serif;          /* condensed numerals */
  --font-sans:      'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Sizes — fluid clamps; mobile-first */
  --fs-mega:        clamp(64px, 14vw, 220px);   /* hero kicker numerals / banner */
  --fs-display:     clamp(48px, 9vw, 140px);    /* hero headline */
  --fs-h1:          clamp(40px, 6vw, 88px);     /* section openers */
  --fs-h2:          clamp(32px, 4.5vw, 56px);
  --fs-h3:          clamp(24px, 3vw, 36px);
  --fs-h4:          22px;
  --fs-h5:          18px;
  --fs-lead:        20px;
  --fs-body:        16px;
  --fs-sm:          14px;
  --fs-xs:          12px;
  --fs-eyebrow:     11px;

  /* Weights */
  --fw-body:        400;
  --fw-med:         500;
  --fw-semi:        600;
  --fw-bold:        700;
  --fw-black:       900;

  /* Line heights */
  --lh-tight:       0.92;
  --lh-display:     1.0;
  --lh-snug:        1.15;
  --lh-body:        1.55;
  --lh-loose:       1.7;

  /* Letter spacing */
  --tracking-mega:  -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal:0;
  --tracking-wide:  0.04em;
  --tracking-wider: 0.08em;
  --tracking-eyebrow: 0.18em;

  /* ---------------------------------------------------------------------
     SPACING & SHAPE
     --------------------------------------------------------------------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10:  128px;
  --sp-section: clamp(64px, 10vw, 160px);

  --radius-none:    0px;
  --radius-xs:      2px;        /* sharp cards — the default */
  --radius-sm:      4px;
  --radius-md:      8px;        /* inputs, small surfaces */
  --radius-lg:      16px;       /* feature cards */
  --radius-pill:    9999px;     /* CTA pills, chips */

  --border-1:       1px solid var(--hairline);
  --border-strong:  1px solid var(--hairline-strong);
  --border-volt:    1px solid var(--hairline-volt);

  /* Container */
  --container:      1280px;   /* max content width (spec: ≤1280px, centred) */
  --gutter:         clamp(20px, 3vw, 48px);

  /* Motion */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:       140ms;
  --dur-med:        260ms;
  --dur-slow:       520ms;
  --dur-cinema:     880ms;
}

/* =========================================================================
   BASE STYLES
   ========================================================================= */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--volt);
  color: var(--fg-on-volt);
}

/* =========================================================================
   SEMANTIC TYPE — drop-in tokens
   ========================================================================= */

.t-mega,
.t-display,
.t-h1,
.t-h2 {
  font-family: var(--font-display);
  font-weight: 400;                 /* Anton is single-weight */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.t-mega    { font-size: var(--fs-mega);    line-height: 0.86; }
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); }
.t-h1      { font-size: var(--fs-h1); }
.t-h2      { font-size: var(--fs-h2); }

.t-h3, .t-h4, .t-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-transform: uppercase;
}
.t-h3 { font-size: var(--fs-h3); }
.t-h4 { font-size: var(--fs-h4); }
.t-h5 { font-size: var(--fs-h5); }

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--volt);
  margin: 0;
}

.t-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-med);
  line-height: 1.45;
  color: var(--fg-2);
  margin: 0;
}

.t-body  { font-size: var(--fs-body); color: var(--fg-2); line-height: var(--lh-body); }
.t-small { font-size: var(--fs-sm);   color: var(--fg-3); line-height: 1.5; }
.t-meta  { font-size: var(--fs-xs);   color: var(--fg-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: var(--fw-semi); }

.t-mono  {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.t-stat-num {
  font-family: var(--font-stat);
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.9;
  letter-spacing: 0;
  color: var(--fg-1);
}

/* Volt highlight — paint behind / under text */
.t-highlight-volt {
  color: var(--volt);
}
.t-strike-volt {
  background: linear-gradient(180deg, transparent 62%, var(--volt) 62%, var(--volt) 92%, transparent 92%);
  padding: 0 .15em;
}

/* Common elements default to semantic tokens */
h1 { font: 400 var(--fs-h1)/var(--lh-tight) var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-tight); margin: 0; }
h2 { font: 400 var(--fs-h2)/var(--lh-tight) var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-tight); margin: 0; }
h3 { font: var(--fw-black) var(--fs-h3)/var(--lh-snug) var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-tight); margin: 0; }
h4 { font: var(--fw-black) var(--fs-h4)/var(--lh-snug) var(--font-sans); text-transform: uppercase; margin: 0; }
p  { margin: 0; color: var(--fg-2); }
small { font-size: var(--fs-sm); color: var(--fg-3); }
code, kbd, samp { font-family: var(--font-mono); }

/* =========================================================================
   UTILITY COMPONENTS — used by preview cards & UI kit
   ========================================================================= */

/* Pill CTA — black/navy fill with volt label is the signature */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 14px 22px;
  /* Rounded-rectangle CTA (curved corners, not full pill) — applied site-wide
     per repeated client request: every button shares this shape. */
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn--volt    { background: var(--volt); color: var(--fg-on-volt); }
.btn--volt:hover { background: var(--volt-glow); box-shadow: var(--glow-volt-sm); }

.btn--ghost   { background: transparent; color: var(--fg-1); border: var(--border-strong); }
.btn--ghost:hover { background: rgba(255,255,255,0.06); }

.btn--solid   { background: var(--white); color: var(--navy); }
.btn--solid:hover { background: var(--off-white); }

.btn--dark    { background: var(--navy); color: var(--fg-1); border: var(--border-1); }

.btn--lg      { padding: 18px 28px; font-size: var(--fs-body); }
.btn--sm      { padding: 10px 16px; font-size: var(--fs-xs); }

/* Chip / badge */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  color: var(--fg-1);
  border: var(--border-1);
}
.chip--volt { background: var(--volt); color: var(--fg-on-volt); border-color: transparent; }
.chip--live { background: var(--live); color: var(--white); border-color: transparent; }
.chip--win  { background: var(--win); color: var(--navy); border-color: transparent; }
.chip--draw { background: var(--draw); color: var(--navy); border-color: transparent; }
.chip--loss { background: var(--loss); color: var(--white); border-color: transparent; }

/* Card — flat dark surface with subtle hairline */
.card {
  background: var(--surface-1);
  border: var(--border-1);
  border-radius: var(--radius-xs);
  padding: var(--sp-5);
}

/* Volt accent rule — left rail used on fixtures / news */
.rule-volt {
  position: relative;
  padding-left: var(--sp-4);
}
.rule-volt::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 4px;
  background: var(--volt);
  box-shadow: var(--glow-volt-sm);
}