/*
 * Design-tokens — modsvarer BigSolverWEB's lib/palette.ts + theme.ts.
 * Alt visuelt udtryk i MyTravel hentes herfra; ingen farve skrives direkte i de andre filer.
 */

:root {
    /* ---- Brand: dyb navy, royalblå, lyseblå (hb-care.dk) ---- */
    --brand: #3c58e0; /* primær */
    --brand-light: #4e78f4; /* hover/accent */
    --brand-dark: #011689; /* hero, sidebar */

    --brand-0: #e6e9f4;
    --brand-1: #ccd4f2;
    --brand-2: #a9b8ee;
    --brand-3: #859ceb;
    --brand-4: #6a8ae8;
    --brand-5: #4e78f4;
    --brand-6: #3c58e0;
    --brand-7: #2f45b8;
    --brand-8: #1b2ea3;
    --brand-9: #011689;

    /* ---- Status: kun semantik (advarsel/fejl/ok) ---- */
    --amber: #f59e0b;
    --amber-0: #fef6e7;
    --amber-7: #d18509;
    --red: #dc2626;
    --red-0: #fdeaea;
    --red-7: #b91c1c;
    --green: #16a34a;
    --green-0: #eefbf3;
    --green-7: #118a3e;

    /* ---- Varm grå skala til neutrale flader ---- */
    --warm-0: #faf9f6;
    --warm-1: #f5f2ec;
    --warm-2: #ece9e0;
    --warm-3: #e2ded2;
    --warm-4: #d6d4cc;
    --warm-5: #c2bfb4;
    --warm-6: #a8a49a;
    --warm-7: #847f74;
    --warm-8: #5c584f;
    --warm-9: #303028;

    /* ---- Flader ---- */
    --app-bg: #e6e9f4; /* lavendelblå appbaggrund */
    --surface: #ffffff;
    --surface-warm: #f5f2ec;
    --border: #ccd4f2;
    --border-warm: #e2ded2;

    /* ---- Tekst ---- */
    --text: #303028;
    --text-dimmed: #5c584f;
    --text-on-brand: #ffffff;

    /* ---- Radius (theme.ts: md 12, lg 16) ---- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ---- Skygger (blåtonede, som theme.ts) ---- */
    --shadow-xs: 0 1px 2px rgba(1, 22, 137, .06);
    --shadow-sm: 0 1px 3px rgba(1, 22, 137, .08), 0 1px 2px rgba(1, 22, 137, .05);
    --shadow-md: 0 4px 12px rgba(1, 22, 137, .10);
    --shadow-lg: 0 10px 30px rgba(1, 22, 137, .18);
    --shadow-hero: 0 6px 20px rgba(1, 22, 137, .22);

    /* ---- Afstande (Mantine-skalaen) ---- */
    --sp-xs: 10px;
    --sp-sm: 12px;
    --sp-md: 16px;
    --sp-lg: 20px;
    --sp-xl: 32px;

    /* ---- Typografi ---- */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fs-xs: 13px; /* badges, hjælpetekst */
    --fs-sm: 15px; /* sekundær tekst */
    --fs-md: 16px; /* brødtekst - adresser, felter, knapper i panelet */
    --fs-lg: 20px; /* retning, borgerens navn */
    --fs-xl: 24px;
    --fw-heading: 650;

    /* ---- Shell-mål ---- */
    --header-h: 60px; /* topbjælke */
    --nav-h: 62px;    /* bundmenu */
}