:root {
  --color-white: #f4f6f4;

  --color-red: #ea2434;
  --color-red-dark: #bb1321;

  --color-green: #14a35d;
  --color-green-dark: #0b7543;

  --color-bg: #000000;
  --color-bg-elevated: #0b0b0b;
  --color-surface: #131313;
  --color-surface-strong: #18201b;
  --color-surface-muted: #1c2520;

  --color-ink: #f1f5f2;
  --color-muted: #a7b2ab;
  --color-border: #29332d;
  --color-overlay: rgb(0 0 0 / 70%);

  --header-height: 76px;
  --page-gutter: clamp(18px, 5vw, 28px);
  --content-width: 1180px;

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-header: 0 10px 34px rgb(0 0 0 / 34%);
  --shadow-menu: -24px 0 64px rgb(0 0 0 / 48%);

  --transition-fast: 180ms ease;
  --transition-base: 280ms cubic-bezier(.2, .8, .2, 1);

  --hero-gutter: clamp(24px, 7vw, 36px);

  --league-banner-height: 34px;

  --top-navigation-height:
    calc(
      var(--league-banner-height) +
      var(--header-height)
    );

  /* =========================================
   TYPOGRAPHY SYSTEM
   ========================================= */

  --font-body:
    Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

  --font-display:
    "Barlow Condensed", sans-serif;

  /* Testo */
  --text-xs: 0.7rem;
  --text-sm: 0.82rem;
  --text-base: 0.95rem;
  --text-lg: 1.05rem;

  /* Titoli */
  --text-card-title: clamp(1.3rem, 4vw, 1.7rem);
  --text-section-title: clamp(2rem, 6vw, 3rem);
  --text-page-title: clamp(2.35rem, 7vw, 4.25rem);
  --text-article-title: clamp(2rem, 6.5vw, 3.75rem);

  --text-detail-title: clamp(1.85rem, 4.5vw, 2.8rem);
}