/* Viga wordt zelf gehost (/fonts/) — sneller (geen extra DNS/verbinding
   naar Google) en geen speler-IP's naar Google Fonts (GDPR).
   Bestanden en unicode-ranges komen van Google Fonts (OFL-licentie). */
@font-face {
    font-family: 'Viga';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/viga-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Viga';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/viga-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Let op: de 500-tinten staan ook (als hex) in game/_common.php,
   in game_theme_style() voor de <meta name="theme-color">.
   Wijzig je hier een 500-waarde, pas dat mapje dan mee aan. */

:root {
    /* ── Lettertypes ──────────────────────────────────────── */
    --font-heading: 'Viga', system-ui, sans-serif;                 /* enkel voor koppen */
    --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* ── Groen ────────────────────────────────────────────── */
    --color-groen-100: #E6F7F2;
    --color-groen-200: #ACE2D5;
    --color-groen-300: #73CCB7;
    --color-groen-400: #39B597;
    --color-groen-500: #009B77;
    --color-groen-600: #008364;
    --color-groen-700: #006A50;
    --color-groen-800: #004F3C;
    --color-groen-900: #003326;

    /* ── Rood ─────────────────────────────────────────────── */
    --color-rood-100: #FFE6EC;
    --color-rood-200: #FFAEC2;
    --color-rood-300: #FF7999;
    --color-rood-400: #FF4772;
    --color-rood-500: #FF174C;
    --color-rood-600: #D20E3C;
    --color-rood-700: #A6072D;
    --color-rood-800: #790320;
    --color-rood-900: #4D0013;

    /* ── Oranje ───────────────────────────────────────────── */
    --color-oranje-100: #FFF5E6;
    --color-oranje-200: #FFDDAC;
    --color-oranje-300: #FFC573;
    --color-oranje-400: #FFAC39;
    --color-oranje-500: #FF9301;
    --color-oranje-600: #D27A00;
    --color-oranje-700: #A66100;
    --color-oranje-800: #794700;
    --color-oranje-900: #4D2D00;

    /* ── Geel (team) ──────────────────────────────────────── */
    --color-geel-100: #FFFCE8;
    --color-geel-200: #FFF4B7;
    --color-geel-300: #FFEB88;
    --color-geel-400: #FFE15B;
    --color-geel-500: #FFD531;
    --color-geel-600: #D2B224;
    --color-geel-700: #A68E19;
    --color-geel-800: #796A10;
    --color-geel-900: #4D4409;

    /* ── Blauw (team) ─────────────────────────────────────── */
    --color-blauw-100: #E6F5FF;
    --color-blauw-200: #B0DEFF;
    --color-blauw-300: #7CC6FD;
    --color-blauw-400: #4AAEF8;
    --color-blauw-500: #1B96F1;
    --color-blauw-600: #127CCB;
    --color-blauw-700: #0B63A4;
    --color-blauw-800: #054879;
    --color-blauw-900: #022E4D;

    /* ── Paars (team) ─────────────────────────────────────── */
    --color-paars-100: #F4EDFB;
    --color-paars-200: #DDC6F2;
    --color-paars-300: #C5A1E7;
    --color-paars-400: #AD7CDB;
    --color-paars-500: #9559CD;
    --color-paars-600: #7B47AC;
    --color-paars-700: #613689;
    --color-paars-800: #472666;
    --color-paars-900: #2D1741;

    /* ── Bruin (warm / team) ──────────────────────────────── */
    --color-bruin-100: #F7EFE8;
    --color-bruin-200: #E6D0BB;
    --color-bruin-300: #D4B08D;
    --color-bruin-400: #C29060;
    --color-bruin-500: #A67244;
    --color-bruin-600: #895D38;
    --color-bruin-700: #6C482B;
    --color-bruin-800: #4F341F;
    --color-bruin-900: #322012;

    /* ── Wit (gebroken warm wit / team) ───────────────────── */
    /* 500 leest als een warm gebroken wit; de donkere tinten
       geven warme taupe voor tekst/randen op dat wit. */
    --color-wit-100: #FFFEFB;
    --color-wit-200: #FBF8F1;
    --color-wit-300: #F6F1E6;
    --color-wit-400: #F1EADB;
    --color-wit-500: #EEE7DA;
    --color-wit-600: #C4BAA6;
    --color-wit-700: #9C927E;
    --color-wit-800: #6E6554;
    --color-wit-900: #40382B;

    /* ── Zwart (bijna zwart / team) ───────────────────────── */
    /* 500 is een bijna-zwarte identiteit; 100-400 zijn de
       bijhorende neutrale grijzen. */
    --color-zwart-100: #ECECEE;
    --color-zwart-200: #CDCED2;
    --color-zwart-300: #9A9CA3;
    --color-zwart-400: #5C5E66;
    --color-zwart-500: #26282E;
    --color-zwart-600: #1F2126;
    --color-zwart-700: #181A1E;
    --color-zwart-800: #111216;
    --color-zwart-900: #0A0B0D;

    /* ── Grijs (neutraal, vervangt zwart/wit) ─────────────── */
    --color-grijs-100: #F4F6F7;
    --color-grijs-200: #DBE0E6;
    --color-grijs-300: #C2CBD4;
    --color-grijs-400: #A9B5C2;
    --color-grijs-500: #91A0AF;
    --color-grijs-600: #798C9E;
    --color-grijs-700: #677A8D;
    --color-grijs-800: #52606F;
    --color-grijs-900: #343F49;

    /* ── Score (scoreschaal, apart van grijs) ────────────── */
    --color-score-100: #F8F8F8;
    --color-score-200: #F4F4F4;
    --color-score-300: #ECECEC;
    --color-score-400: #E5E5E5;
    --color-score-500: #DDDDDD;
    --color-score-600: #C9C9C9;
    --color-score-700: #B7B7B7;
    --color-score-800: #9D9D9D;
    --color-score-900: #7C7C7C;

    /* ── Basics ───────────────────────────────────────────── */
    /* Bewust niet puur #FFF / #000 — wordt later getweakt */
    --color-white: #FDFEFE;
    --color-black: #1A1F24;

    /* ── Oppervlak ────────────────────────────────────────── */
    /* Warme, neutrale paginakleur voor het default event-thema.
       (Het spongyfun-thema overschrijft --page-bg apart in
       game_theme_style() met groen-100.) */
    --page-bg-default: #EAE8E1;
}