/* Design-tokens. Eén systeem, twee oppervlakken:
   - standaard :root = licht (beheer/desktop)
   - [data-surface="dark"] = donker (kassa), zelfde tokens, omgekeerde surfaces. */

:root {
    /* Merk-constanten (blijven gelijk in beide oppervlakken) */
    --spot: #2B2FBB;
    --spot-ink: #FFFFFF;
    --signal: #D9531E;
    --pos: #2E7D57;
    --neg: #B33A24;
    --groove: #8A857A;

    /* Licht oppervlak (beheer) */
    --bg: #DEDCD3;
    --surface: #EAE8E0;
    --surface-2: #F4F2EC;
    --surface-sunken: #D8D5CB;
    --text: #17140E;
    --text-muted: #635F54;
    --text-faint: #8A857A;
    --line: #D3D0C5;
    --line-strong: #C2BEB1;
    --accent: var(--spot);
    --accent-ink: #FFFFFF;
    --accent-soft: #E3E3F4;
    --accent-text: #262AA6;
    --pos-soft: #DDEEE4;
    --pos-text: #1F6045;
    --neg-soft: #F4DED8;
    --neg-text: #8E2C1A;
    --signal-soft: #F7E2D6;
    --signal-text: #A63D14;
    --focus: #2B2FBB;
    --shadow-card: 0 1px 2px rgba(23, 20, 14, .06), 0 8px 24px -16px rgba(23, 20, 14, .30);
    --shadow-pop: 0 12px 40px -12px rgba(23, 20, 14, .40);

    /* Typografie */
    --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;

    --fs-xs: .75rem;     /* 12 */
    --fs-sm: .8125rem;   /* 13 */
    --fs-base: .9375rem; /* 15 */
    --fs-md: 1.0625rem;  /* 17 */
    --fs-lg: 1.25rem;    /* 20 */
    --fs-xl: 1.625rem;   /* 26 */
    --fs-2xl: 2.125rem;  /* 34 */
    --fs-3xl: 2.875rem;  /* 46 */

    /* Ruimte */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    --radius: 10px;
    --radius-sm: 7px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --tap: 44px; /* minimale aanraakmaat */
}

[data-surface="dark"] {
    --bg: #0F0D09;
    --surface: #17140E;
    --surface-2: #211D15;
    --surface-sunken: #100E0A;
    --text: #EFECE3;
    --text-muted: #A49E91;
    --text-faint: #7C766A;
    --line: #2A2620;
    --line-strong: #39332A;
    --accent: #565BE0;
    --accent-ink: #FFFFFF;
    --accent-soft: #1E1E3A;
    --accent-text: #B9BBF4;
    --pos: #3FAE79;
    --pos-soft: #10281C;
    --pos-text: #7FD9AC;
    --neg: #E0664B;
    --neg-soft: #2E140E;
    --neg-text: #F0A491;
    --signal: #EE6A32;
    --signal-soft: #2C1509;
    --signal-text: #F2A578;
    --focus: #7C80F0;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -18px rgba(0, 0, 0, .7);
    --shadow-pop: 0 16px 48px -12px rgba(0, 0, 0, .75);
}