@import url("fonts/poppins/poppins.css");

/* Solid neutral surfaces with distinct action colors and readable text. */
:root {
    --app-font-family: "Poppins", sans-serif;
    color-scheme: light;
    --app-bg: #ffffff;
    --app-surface: #ffffff;
    --app-surface-rgb: 255 255 255;
    --app-surface-raised: #f5f5f5;
    --app-border: #d0d0d0;
    --app-text: #292929;
    --app-text-secondary: #414141;
    --app-text-muted: #595959;
    /* De Graafschap: blauw is de enige primaire actiekleur. */
    --app-accent: #005cad;
    --app-accent-strong: #00417f;
    --app-accent-hover: #00356a;
    --app-accent-text: #00417f;
    --app-accent-soft: #e6f3fb;
    --app-accent-border: #8cc8ec;
    --fc-page-bg-color: var(--app-surface);
    --fc-neutral-bg-color: var(--app-surface-raised);
    --fc-neutral-text-color: var(--app-text-muted);
    --fc-border-color: var(--app-border);
    --fc-today-bg-color: var(--app-accent-soft);
    --fc-event-bg-color: var(--app-accent-strong);
    --fc-event-border-color: var(--app-accent-strong);
}

html, body {
    font-family: var(--app-font-family);
    background-color: var(--app-bg);
    color: var(--app-text);
}

input, select, textarea {
    color-scheme: light;
    accent-color: var(--app-accent);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select, textarea {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

input::placeholder, textarea::placeholder {
    color: var(--app-text-muted);
    opacity: 1;
}

::selection {
    background: var(--app-accent-strong);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--app-accent-text);
    outline-offset: 3px;
}

/* Native controls and keyboard labels use the same text face as the page. */
button, input, select, textarea, optgroup, code, kbd, pre, samp {
    font-family: var(--app-font-family);
}