/* Design tokens. Light-first, calm surfaces; red and green are signals, never wallpaper. */
:root {
  color-scheme: light;

  --bg:          #F3F4F6;
  --surface:     #FFFFFF;
  --surface-2:   #F6F7F9;
  --surface-3:   #ECEEF1;
  --ink:         #0F1214;
  --ink-2:       #5A6169;   /* secondary text: 5.7:1 on --bg */
  --line:        #E5E7EB;

  --brand:       #0B5D3B;   /* the brand band (header, app icon) */
  --atlas-green: #006233;   /* Moroccan marker, primary actions */
  --atlas-tint:  #E7F3EC;
  --flag-red:    #C1272D;   /* LIVE, breaking, .ma */
  --sand:        #C9A15B;   /* champions, gold */

  --win:         #1E7A46;
  --draw:        #6B6F6C;
  --loss:        #B3262D;
  --promo:       #1F5FBF;
  --relegation:  #B3262D;
  --on-status:   #FFFFFF;

  --font-ui:       "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-headline: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic:   "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;

  --step--1: 0.8125rem; --step-0: 0.9375rem; --step-1: 1.0625rem;
  --step-2: 1.25rem;    --step-3: 1.625rem;  --step-4: 2.25rem; --step-5: 3rem;

  --radius-s: 6px; --radius-m: 10px; --radius-l: 16px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 6px rgb(16 24 40 / 0.05);
  --shadow-pop:  0 12px 32px rgb(16 24 40 / 0.14);

  --page-max: 1320px;
  --gutter: 16px;
  --touch: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0C0E10; --surface: #16191C; --surface-2: #1C2024; --surface-3: #252A2F;
    --ink: #F2F4F5; --ink-2: #A0A7AE; --line: #262B30;
    --brand: #0A3F29; --atlas-green: #3DBB7A; --atlas-tint: #13261C; --flag-red: #F0545A; --sand: #D9B577;
    --win: #34B36A; --draw: #868B88; --loss: #F06A70; --promo: #6E9BF0; --relegation: #F06A70;
    --on-status: #0C0E10;
    --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.04); --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C0E10; --surface: #16191C; --surface-2: #1C2024; --surface-3: #252A2F;
  --ink: #F2F4F5; --ink-2: #A0A7AE; --line: #262B30;
  --brand: #0A3F29; --atlas-green: #3DBB7A; --atlas-tint: #13261C; --flag-red: #F0545A; --sand: #D9B577;
  --win: #34B36A; --draw: #868B88; --loss: #F06A70; --promo: #6E9BF0; --relegation: #F06A70;
  --on-status: #0C0E10;
  --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.04); --shadow-pop: 0 12px 32px rgb(0 0 0 / 0.6);
}

/* Arabic: Plex for UI, Noto Kufi for headlines; digits stay Western (0-9). */
:root[dir="rtl"] {
  --font-ui: var(--font-arabic);
  --font-headline: "Noto Kufi Arabic", var(--font-arabic);
}