/* Uitzendbureau Tycoon — basistokens.
 * Dezelfde kleuren en lettertypen als hub/style.css (GDD §12.8: "Geen eigen
 * kleurenpalet, geen tweede lettertypepaar"). v0.1 heeft bewust alleen het
 * donkere thema — geen licht/donker-toggle: dat is polish, geen onderdeel van
 * het speelbare skelet, en kan later zonder iets hier te breken worden
 * toegevoegd (dezelfde tokens, een tweede :root[data-theme]-blok).
 */

:root {
    --primary:       #6d6af5;
    --primary-hover: #817eff;
    --primary-soft:  rgba(109,106,245,0.14);
    --accent:        #f4b13c;
    --success:       #16a06a;
    --gevaar:        #e0555a;
    --waarschuwing:  #d9a441;

    --radius:    16px;
    --radius-sm: 10px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --font-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --font-body: "Outfit", "Segoe UI", system-ui, sans-serif;

    color-scheme: dark;
    --bg:          #0b0c11;
    --bg-soft:     #101119;
    --surface:     #14151d;
    --bg-card:     #15161f;
    --line:        rgba(255,255,255,0.09);
    --line-strong: rgba(255,255,255,0.16);
    --tint:        rgba(255,255,255,0.04);
    --text:        #f3f3f7;
    --text-dim:    #b5b6c5;
    --text-faint:  #7a7b8e;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
    --shadow-md: 0 10px 30px -14px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; margin: 0 0 0.4em; }

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: 1px solid var(--line-strong);
    background: var(--bg-card);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0.5em 0.9em;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
button:hover:not(:disabled) { background: var(--tint); border-color: var(--primary); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primair { background: var(--primary); border-color: var(--primary); color: #fff; }
button.primair:hover:not(:disabled) { background: var(--primary-hover); }
button.gevaar { border-color: var(--gevaar); color: var(--gevaar); }

input, select {
    font-family: inherit;
    font-size: inherit;
    background: var(--bg-soft);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 0.5em 0.7em;
}

a { color: var(--primary); }

.verborgen { display: none !important; }