/*
 * Designtokens. Utseendet delas med Kansliet och beskrivs i DESIGN.md.
 *
 * Ingen komponent anger en färg direkt; allt hämtas härifrån.
 * Undantaget är kategorifärgerna, som admin väljer per kategori.
 */

:root {
    /* Ytor */
    --bg: #0a0c11;
    --surface-1: #10131a;
    --surface-2: #161a23;
    --surface-3: #1e232e;

    /* Kanter */
    --border: #232937;
    --border-strong: #333b4e;

    /* Text */
    --text: #e6e9f0;
    --muted: #8b94a8;

    /* Accent: det som går att klicka på eller är valt */
    --accent: #8394ff;
    --accent-strong: #5468f0;
    --accent-contrast: #ffffff;

    /* Status */
    --success: #4cc38a;
    --attention: #f2b84b;
    --danger: #f06c6c;
    --test-banner: #b45309;

    /* Härledda */
    --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
    --accent-line: color-mix(in srgb, var(--accent) 38%, transparent);
    --success-soft: color-mix(in srgb, var(--success) 12%, transparent);
    --success-line: color-mix(in srgb, var(--success) 40%, transparent);
    --attention-soft: color-mix(in srgb, var(--attention) 12%, transparent);
    --attention-line: color-mix(in srgb, var(--attention) 40%, transparent);
    --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
    --danger-line: color-mix(in srgb, var(--danger) 40%, transparent);
    --glass: color-mix(in srgb, var(--bg) 78%, transparent);

    /* Form */
    --r-sm: 3px;
    --r: 5px;
    --r-lg: 8px;

    /* Avstånd */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;

    /* Typografi */
    --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs-2xs: 10px;
    --fs-xs: 11px;
    --fs-sm: 12.5px;
    --fs: 14px;
    --fs-lg: 16px;
    --fs-xl: 19px;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 18px 48px rgba(0, 0, 0, 0.5);
}