@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,500,500i,700,700i,900,900i');

:root {
  /* Color */
  /*--color-dark-green: #2AA35C;
  --color-light-green: #2DC36C;
  --color-light-blue: #718F94;
  --color-dark-purple: #303248;
  --color-purple: #545775;
  --color-light-grey: #EAEDF2;
  --color-dark-grey: #A9A9A9;
  --color-white: #FFFFFF;
  --color-black: #000000;*/


  /* World Cup 2026 brand palette */
  --wc26_blue : #0040D8;
  --wc26_red : #FF0000;
  --wc26_green : #006837;

  --color-background : #FFFFFF;
  /* Was #143CDB (blue). Now WC green — drives the calendar headers, score
     badges, article topics etc. The menu-bar keeps its own WC blue (set
     explicitly in base.css), the top-nav-bar gets WC red, and the logo-row
     goes white, so those three are overridden rather than driven by a var. */
  --color-menu-background : var(--wc26_green);
  --color-menu-font : #FFFFFF;
  --color-border : #A9A9A9;
  --color-nav-background : #000000;
  --color-nav-font : #FFFFFF;
  --color-main-accent : var(--wc26_green);
  --color-main-accent-font : #FFFFFF;
  --color-secondary-accent : #2DC36C;
  --color-shadow : var(--wc26_green);
  --color-main-font : #000000;
  --color-main-news-font : #FFFFFF;
  --color-premium-league: #8A002D;
  --color-national-team: #0550F0;
  --color-side-content-background: #FFFFFF;
  --color-third-accent: #F9BF4B;

  /* Font */
  --h1-font-size: 26px;
  --h1-font-weight: 700;
  --h1-line-height: 32px;
  --h1-m-font-size: 24px;
  --h1-m-font-weight: 700;
  --h1-m-line-height: 26px;

  --h2-font-size: 26px;
  --h2-font-weight: 700;
  --h2-line-height: 28px;
  --h2-m-font-size: 22px;
  --h2-m-font-weight: 700;
  --h2-m-line-height: 24px;

  --h3-font-size: 22px;
  --h3-font-weight: 700;
  --h3-line-height: 22px;
  --h3-m-font-size: 16px;
  --h3-m-font-weight: 700;
  --h3-m-line-height: 18px;

  --h4-font-size: 18px;
  --h4-font-weight: 700;
  --h4-line-height: 18px;
  --h4-m-font-size: 14px;
  --h4-m-font-weight: 700;
  --h4-m-line-height: 16px;

  --article-font-size: 18px;
  --article-line-height: 28px;
  --article-m-font-size: 15px;
  --article-m-line-height: 25px;

  --main-font-family: 'Lato', sans-serif;
  --secondary-font-family: 'Lato', sans-serif;

  /* Z-index */
  --z-index-base: 1;
  --z-index-menu: 100;
  --z-index-ad: 200;
  --z-index-overlay: 300;
  --z-index-modal: 400;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Color */
    /*
    --color-dark-green: #2AA35C;
    --color-light-green: #2DC36C;
    --color-light-blue: #718F94;
    --color-dark-purple: #EAEDF2;
    --color-purple: #3DAFBD;
    --color-light-grey: #303248;
    --color-dark-grey: #A9A9A9;
    --color-white: #5B5B5B;
    --color-black: #FFFFFF;
    --color-premium-league: #8A002D;
    --color-national-team: #0550F0;*/
  }
}