/* ============================================================
   USSSA ALL AMERICAN GAMES — DESIGN TOKENS

   Single source of truth for brand: navy / red / white / chrome.
   Colors sampled directly from the official AAG logo mark
   (assets/aag-logo-full.png):
       navy   #002762   red  #CE1E26
       navy2  #001F5C   red2 #B8202C
       white  #FFFFFF   chrome #CCCCCC

   These tokens MUST stay in sync with css/home.css (homepage)
   and css/login.css (sign-in page) — they all read the same
   visual language.

   The --aag-* names are authoritative. The generic aliases at the
   bottom (--red, --navy, --gold …) exist because pages cloned from
   the previous platform reference them; they all resolve to an
   --aag-* value, so there is exactly one place to change a color.
   ============================================================ */

:root {
  /* ---- Canonical AAG brand tokens (authoritative) ---- */
  --aag-navy:       #002762;
  --aag-navy-deep:  #001435;
  --aag-navy-soft:  #1a3d7c;
  --aag-red:        #ce1e26;
  --aag-red-deep:   #b8202c;
  --aag-chrome:     #cccccc;   /* logo lettering / metallic accents */
  --aag-white:      #ffffff;
  --aag-bg:         #fafbfc;
  --aag-bg-alt:     #f1f4f9;
  --aag-border:     #e2e8f0;
  --aag-ink:        #0b1524;
  --aag-ink-soft:   #475569;
  --aag-ink-muted:  #64748b;
  --aag-gold:       #f4b942;   /* used only for star ratings */

  --shadow-sm: 0 1px 2px rgba(11,21,36,.06), 0 1px 3px rgba(11,21,36,.04);
  --shadow-md: 0 4px 6px -1px rgba(11,21,36,.08), 0 2px 4px -2px rgba(11,21,36,.06);
  --shadow-lg: 0 12px 24px -8px rgba(0,39,98,.18), 0 8px 16px -8px rgba(0,39,98,.12);
  --shadow-xl: 0 24px 48px -12px rgba(0,39,98,.22);

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --container:   1200px;
  --section-pad: 100px;

  --font-display: 'Oswald', 'Barlow Condensed', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- Generic aliases used by cloned pages ----
     Do not add new rules against these names; use --aag-* above. */
  --red:         var(--aag-red);
  --red-dk:      var(--aag-red-deep);
  --red-glow:    rgba(206, 30, 38, 0.30);
  --green:       var(--aag-navy);
  --green-dk:    var(--aag-navy-deep);
  --gold:        var(--aag-red);
  --gold-bright: var(--aag-red-deep);
  --navy:        var(--aag-navy);
  --navy-mid:    var(--aag-navy-soft);
  --navy-light:  var(--aag-navy-soft);
  --white:       #ffffff;
  --off-white:   var(--aag-bg);
  --cream:       var(--aag-bg-alt);
  --charcoal:    var(--aag-ink);
  --gray:        var(--aag-ink-soft);
  --gray-light:  var(--aag-ink-muted);
  --ice:         var(--aag-bg-alt);
  --border:      var(--aag-border);

  /* Status colors — kept distinct from brand */
  --success:     #16a34a;
  --warning:     #d97706;
  --danger:      #dc2626;
  --info:        var(--aag-navy);

  /* Typography aliases → all collapse to Oswald + Inter */
  --font-impact:    var(--font-display);
  --font-condensed: var(--font-display);
  --font-body:      var(--font-sans);
  --font-accent:    var(--font-sans);
}

@media (max-width: 640px) {
  :root { --section-pad: 64px; }
}