/* ==========================================================================
   FootyHub brand tokens

   Every value here is lifted from the running Flutter app so the site and the
   game cannot drift apart. When a colour changes in lib/constants/app_colors.dart
   or in the widgets named below, change it here too.
   ========================================================================== */

:root {
  /* --- Core palette -------------------------------------------------------
     Sources: lib/constants/app_colors.dart, pubspec.yaml:31 (adaptive icon),
     android/app/src/main/res/values/colors.xml, web/index.html. */

  --navy:          #061529;  /* the app canvas — launcher, splash, every screen */
  --navy-deep:     #030c18;  /* footer / below-the-fold shade of the canvas     */
  --accent:        #4CAF50;  /* AppColors.accent — every CTA and active state   */
  --accent-dark:   #388E3C;  /* the app's "correct answer" green                */
  --panel:         #1A1A2E;  /* floating nav bar, bottom sheets, chips          */
  --panel-glass:   rgba(18, 32, 50, 0.9);   /* #122032 @ 90%, the glass panel   */
  --panel-glass-2: rgba(12, 29, 49, 0.88);  /* #0C1D31 @ 88%, secondary panel   */
  --text-dark:     #1A1A1A;  /* AppColors.textDark — type on white cards        */

  --gold:   #FFD700;  /* AppColors.gold   — 1st place, top ranks */
  --silver: #C0C0C0;  /* AppColors.silver — 2nd place            */
  --bronze: #CD7F32;  /* AppColors.bronze — 3rd place            */
  --amber:  #FFA726;  /* the app's warning / draw highlight      */

  /* --- Type on dark --------------------------------------------------------
     The app leans on white at descending opacities rather than grey ramps. */

  --on-dark:      #FFFFFF;
  --on-dark-80:   rgba(255, 255, 255, 0.8);   /* sub-hero copy      */
  --on-dark-70:   rgba(255, 255, 255, 0.7);   /* body prose         */
  --on-dark-54:   rgba(255, 255, 255, 0.54);  /* labels, overlines  */
  --on-dark-38:   rgba(255, 255, 255, 0.38);  /* footnotes          */
  --hairline:     rgba(255, 255, 255, 0.08);  /* the app's divider  */
  --hairline-2:   rgba(255, 255, 255, 0.2);   /* ghost button edge  */
  --accent-edge:  rgba(76, 175, 80, 0.5);     /* glass panel border */
  --accent-wash:  rgba(76, 175, 80, 0.12);    /* icon tile tint     */

  /* --- Elevation -----------------------------------------------------------
     The app never uses Material elevation; depth is two stacked shadows.
     Source: lib/widgets/game_card.dart:25-52 */

  --shadow-card:  0 10px 24px rgba(0, 0, 0, 0.28), 0 3px 8px rgba(0, 0, 0, 0.35);
  --shadow-lift:  0 18px 36px rgba(0, 0, 0, 0.36), 0 5px 12px rgba(0, 0, 0, 0.4);
  --shadow-panel: 0 8px 18px rgba(0, 0, 0, 0.4);
  --shadow-cta:   0 4px 14px rgba(76, 175, 80, 0.4);  /* home_page.dart:377 */

  /* --- Radii ---------------------------------------------------------------
     Census across lib/: 12 for chips, 16 for buttons and panels, 20 for cards,
     28 for the floating bottom bar. */

  --r-sm:   8px;
  --r-chip: 12px;
  --r-btn:  16px;
  --r-card: 20px;
  --r-bar:  28px;
  --r-pill: 999px;

  /* --- Type ----------------------------------------------------------------
     Oswald carries anything structural and uppercase; Poppins carries prose.
     Source: lib/main.dart:51 + 131 Oswald / 224 Poppins usages. */

  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Spacing -------------------------------------------------------------
     The app's loose 4pt grid; 20 is the standard screen gutter. */

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  --page-max: 1160px;

  /* --- Motion --------------------------------------------------------------
     Matches the app's 220ms toggles / 250ms nav pill, Curves.easeOut. */

  --ease: cubic-bezier(0.25, 0.8, 0.35, 1);
  --t-fast: 180ms;
  --t-base: 250ms;
}

/* The stadium scrim the app paints over every screen.
   Source: lib/widgets/pitch_background.dart:39-80 (night variant). */
:root {
  --scrim-night: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.05) 48%,
    rgba(3, 20, 11, 0.26) 100%
  );
}

/* --- Self-hosted webfonts -------------------------------------------------
   Latin subsets only. Self-hosting keeps the site free of third-party
   requests, which is what the privacy policy claims. */

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/oswald-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/oswald-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
}