/* ==========================================================================
   3RR Game — Design Tokens
   Theme: "Daylight Arena" — bright light mode, sports-broadcast graphics
   All colour pairings below are annotated with their contrast ratio on the
   surface they are approved for (WCAG 2.1 AA = 4.5:1 body, 3:1 large/UI).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- base */
  --color-bg-base: #FFFFFF;              /* page background, crisp white   */
  --color-bg-block-tint: #F1F5FF;        /* alternating light section band */
  --color-bg-block-deep: #E7EEFF;        /* second-level tint, dividers    */
  --color-surface-card: #FFFFFF;
  --color-border-soft: #DCE6FA;
  --color-border-strong: #BFD0F2;

  /* ------------------------------------------- midnight navy (ink + band) */
  --color-navy-ink: #0B1730;             /* 17.1:1 on white — headings     */
  --color-navy-jumbotron: #081026;
  --color-navy-jumbotron-2: #0D1B3C;
  --color-navy-jumbotron-line: rgba(20, 216, 242, 0.15);

  /* ------------------------------------------ sapphire (blocks + buttons) */
  --color-sapphire-block: #1E4FD8;       /* 6.6:1 on white — links, fills  */
  --color-sapphire-block-light: #3568F5;
  --color-sapphire-deep: #143BA6;

  /* ------------------------------------------------------ electric cyan  */
  --color-cyan-scoreboard: #14D8F2;      /* DECORATIVE ONLY on white       */
  --color-cyan-bright: #22E5FF;          /* text only ON the navy band     */
  --color-cyan-ink: #0A6E80;             /* 5.9:1 on white — cyan-tone text*/

  /* ------------------------------------------------ gold (logo harmony)  */
  --color-gold: #F5A524;                 /* DECORATIVE / on navy only      */
  --color-gold-ink: #97600A;             /* 5.1:1 on white                 */

  /* ------------------------------------------------------------- text    */
  --color-text-primary: #0B1730;         /* 17.1:1 on white                */
  --color-text-secondary: #4C5C7D;       /*  6.7:1 on white                */
  --color-text-tertiary: #5A6A8E;        /*  5.4:1 on white — meta text    */
  --color-text-muted: #7C8AAB;           /*  3.4:1 — LARGE TEXT / UI ONLY  */
  --color-text-on-navy: #E8EFFF;         /* 14.9:1 on navy                 */
  --color-text-on-navy-soft: #A9BCE4;    /*  7.6:1 on navy                 */

  /* --------------------------------------------------------- functional  */
  --color-success: #1FAE7A;              /* fill / icon only               */
  --color-success-ink: #12795A;          /*  5.4:1 on white                */
  --color-success-tint: #E7F8F1;
  --color-warning: #C9791A;              /* fill / icon only               */
  --color-warning-ink: #8A4F08;          /*  6.6:1 on white                */
  --color-warning-tint: #FDF3E3;
  --color-danger: #D8394B;               /*  4.6:1 on white                */
  --color-danger-tint: #FDEDEF;

  /* ------------------------------------------------------------ effects  */
  --shadow-card: 0 10px 26px rgba(11, 23, 48, 0.10);
  --shadow-card-hover: 0 18px 44px rgba(11, 23, 48, 0.16);
  --shadow-nav: 0 2px 18px rgba(11, 23, 48, 0.08);
  --shadow-btn: 0 8px 20px rgba(30, 79, 216, 0.28);
  --shadow-glow-cyan: 0 0 28px rgba(20, 216, 242, 0.30);
  --shadow-inset-hair: inset 0 0 0 1px var(--color-border-soft);

  /* ------------------------------------------------------- angled clips  */
  --clip-angle-sm: polygon(0 0, 100% 0, 100% 100%, 5% 100%);
  --clip-angle-lg: polygon(0 0, 100% 0, 100% 100%, 8% 100%);
  --clip-angle-tile: polygon(0 0, 100% 0, 100% 92%, 92% 100%, 0 100%);
  --clip-angle-btn: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  --clip-angle-chip: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  --clip-angle-panel: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  --clip-angle-band: polygon(0 22px, 100% 0, 100% calc(100% - 22px), 0 100%);

  /* ------------------------------------------------------- typography    */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-display-xl: clamp(2.25rem, 6.4vw, 4.25rem);
  --fs-display-lg: clamp(1.9rem, 5vw, 3.25rem);
  --fs-display-md: clamp(1.6rem, 4vw, 2.5rem);
  --fs-display-sm: clamp(1.35rem, 3vw, 1.85rem);
  --fs-lead: clamp(1.02rem, 2.2vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-scoreboard: clamp(2.75rem, 11vw, 6rem);
  --fs-scoreboard-sm: clamp(1.75rem, 6vw, 3rem);

  --lh-tight: 1.06;
  --lh-snug: 1.24;
  --lh-body: 1.72;

  --tracking-label: 0.16em;
  --tracking-score: 0.03em;

  /* ------------------------------------------------------------ spacing  */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  --section-pad: clamp(3.25rem, 8vw, 6.5rem);

  /* --------------------------------------------- layout + side gutters   */
  --wrap-max: 1240px;
  --wrap-max-wide: 1440px;
  --gutter: 20px;                        /* generous blank space L/R       */

  /* ------------------------------------------------------------ motion   */
  --ease-spring: cubic-bezier(0.16, 1.24, 0.32, 1);
  --ease-snap: cubic-bezier(0.22, 1.1, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-mid: 320ms;
  --dur-slow: 620ms;

  --z-skip: 120;
  --z-nav: 100;
  --z-ticker: 95;
  --z-modal: 200;
  --z-sticky-cta: 90;
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 72px;
  }
}

@media (min-width: 1560px) {
  :root {
    --gutter: 104px;
  }
}

/* --------------------------------------------------------------------------
   Angled surfaces: clip-path clips box-shadow, so every clipped panel uses
   filter: drop-shadow() instead — it follows the clipped silhouette.
   -------------------------------------------------------------------------- */
:root {
  --drop-card: drop-shadow(0 10px 20px rgba(11, 23, 48, 0.14)) drop-shadow(0 2px 5px rgba(11, 23, 48, 0.08));
  --drop-card-hover: drop-shadow(0 20px 34px rgba(11, 23, 48, 0.20)) drop-shadow(0 4px 8px rgba(11, 23, 48, 0.10));
  --drop-soft: drop-shadow(0 6px 14px rgba(11, 23, 48, 0.11));
  --drop-btn: drop-shadow(0 7px 15px rgba(30, 79, 216, 0.30));
  --drop-btn-hover: drop-shadow(0 12px 24px rgba(30, 79, 216, 0.38));
  --drop-tg: drop-shadow(0 7px 15px rgba(27, 146, 209, 0.32));
  --drop-cyan: drop-shadow(0 0 16px rgba(34, 229, 255, 0.45));
  --drop-navy: drop-shadow(0 16px 34px rgba(11, 23, 48, 0.26));
}

/* --------------------------------------------------------------------------
   Contrast-corrected fills
   White text sits on these gradients, so the LIGHT end of each one has to
   clear 4.5:1 on its own — not just the dark end.
   -------------------------------------------------------------------------- */
:root {
  --color-sapphire-btn-end: #2E5EEA;   /* white on it: 5.4:1 */
  --color-tg-dark: #0A5B7E;            /* white on it: 7.5:1 */
  --color-tg-mid: #0E6C96;             /* white on it: 5.8:1 */
  --color-tg-light: #127CAD;           /* white on it: 4.7:1 */
  --color-ghost-num: #7E93C0;          /* 3.1:1 on white — large decorative numerals */
}