/* mdcinco · tokens
   Fontes (coloque no <head>):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Big+Shoulders+Display:wght@700;800&display=swap" rel="stylesheet">
*/
:root{
  color-scheme: light;

  /* Cor: claro */
  --md-bg: #FFFFFF;          /* fundo da página */
  --md-surface: #F1F2F3;     /* blocos, cabeçalhos de tabela */
  --md-line: #DADDE1;        /* bordas e divisórias */
  --md-ink: #15171A;         /* texto principal e logo */
  --md-muted: #5B616B;       /* texto secundário (6.2:1) */
  --md-accent: #E4572E;      /* risco do logo, marcadores, destaques gráficos. Não usar em texto pequeno */
  --md-accent-text: #B8401C; /* acento quando for texto ou link (5.5:1) */
  --md-win: #1E7A4C;
  --md-loss: #B42F2F;
  --md-fav: #2453C7;         /* times favoritos */

  /* Tipografia */
  --md-font-display: "Big Shoulders Display", "Arial Narrow", Arial, sans-serif;
  --md-font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --md-text-xs: 12px;
  --md-text-sm: 14px;
  --md-text-md: 16px;
  --md-text-lg: 20px;
  --md-display-sm: 24px;
  --md-display-md: 32px;
  --md-display-lg: 48px;
  --md-display-xl: 72px;

  /* Espaço, raio, borda */
  --md-space-1: 4px;  --md-space-2: 8px;  --md-space-3: 12px; --md-space-4: 16px;
  --md-space-6: 24px; --md-space-8: 32px; --md-space-12: 48px; --md-space-16: 64px;
  --md-radius-sm: 4px;
  --md-radius: 8px;
  --md-radius-lg: 14px;
  --md-border: 1px solid var(--md-line);
  --md-max-width: 1180px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --md-bg: #0F1114; --md-surface: #181B20; --md-line: #2A2F37;
    --md-ink: #F2F3F5; --md-muted: #9AA1AC;
    --md-accent: #F06A43; --md-accent-text: #F06A43;
    --md-win: #4CC38A; --md-loss: #EF7A7A; --md-fav: #7FA6FF;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --md-bg: #0F1114; --md-surface: #181B20; --md-line: #2A2F37;
  --md-ink: #F2F3F5; --md-muted: #9AA1AC;
  --md-accent: #F06A43; --md-accent-text: #F06A43;
  --md-win: #4CC38A; --md-loss: #EF7A7A; --md-fav: #7FA6FF;
}

/* Base opcional */
body{margin:0;background:var(--md-bg);color:var(--md-ink);font:400 var(--md-text-md)/1.5 var(--md-font-body)}
h1,h2,h3,.md-display{font-family:var(--md-font-display);font-weight:800;line-height:1;letter-spacing:.01em}
.md-num{font-variant-numeric:tabular-nums}
a{color:var(--md-accent-text)}