/*
 * Design tokens: the single source for colours, spacing, radius, shadow and
 * typography (SPECIFICATIE.md 12). Shared by the auth-server and the admin
 * panel; app branding overrides --color-primary and friends at runtime.
 */
:root {
    color-scheme: light dark;

    /* Colours: neutral base, one accent */
    --color-bg: #f7f7f8;
    --color-surface: #ffffff;
    --color-surface-muted: #f0f1f3;
    --color-border: #d9dbe0;
    --color-text: #1b1d22;
    --color-text-muted: #555a64;
    --color-primary: #2855c7;
    --color-primary-contrast: #ffffff;
    --color-focus: #1a73e8;
    --color-success: #1e7a43;
    --color-success-bg: #e6f4ec;
    --color-warning: #8a5a00;
    --color-warning-bg: #fdf3dc;
    --color-danger: #b3261e;
    --color-danger-bg: #fbe9e7;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;

    /* Shape and depth */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.08);

    /* Typography */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.75rem;
    --line-height: 1.5;

    /* Interaction */
    --touch-target: 44px;
    --focus-ring: 0 0 0 3px var(--color-focus);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #131418;
        --color-surface: #1c1e24;
        --color-surface-muted: #24272f;
        --color-border: #3a3e48;
        --color-text: #eceef2;
        --color-text-muted: #a9aeb9;
        --color-primary: #7fa2ff;
        --color-primary-contrast: #0d1020;
        --color-focus: #8ab4f8;
        --color-success: #7fd4a0;
        --color-success-bg: #16301f;
        --color-warning: #f2c46b;
        --color-warning-bg: #33280f;
        --color-danger: #ff8a80;
        --color-danger-bg: #3a1a18;
        --shadow-md: 0 4px 16px rgb(0 0 0 / 0.4);
    }
}

:root[data-theme="dark"] {
    --color-bg: #131418;
    --color-surface: #1c1e24;
    --color-surface-muted: #24272f;
    --color-border: #3a3e48;
    --color-text: #eceef2;
    --color-text-muted: #a9aeb9;
    --color-primary: #7fa2ff;
    --color-primary-contrast: #0d1020;
    --color-focus: #8ab4f8;
    --color-success: #7fd4a0;
    --color-success-bg: #16301f;
    --color-warning: #f2c46b;
    --color-warning-bg: #33280f;
    --color-danger: #ff8a80;
    --color-danger-bg: #3a1a18;
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.4);
}

/* Base, shared by both applications */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

h1 { font-size: var(--text-xl); line-height: 1.2; margin: 0 0 var(--space-4); }
h2 { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-3); }

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

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute;
    left: var(--space-2);
    top: -100px;
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    color: var(--color-text);
    z-index: 100;
}
.skip-link:focus { top: var(--space-2); }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target);
    min-width: var(--touch-target);
    padding: 0 var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.button--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.button--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.button--danger { background: var(--color-danger); color: #fff; }

.notice {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid currentColor;
}
.notice--success { background: var(--color-success-bg); color: var(--color-success); }
.notice--danger { background: var(--color-danger-bg); color: var(--color-danger); }

.badge {
    display: inline-block;
    padding: 0 var(--space-2);
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
}
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }

.help, .muted { color: var(--color-text-muted); font-size: var(--text-sm); }

.error-details {
    overflow: auto;
    padding: var(--space-3);
    background: var(--color-surface-muted);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    white-space: pre-wrap;
}