/* Wrapped in @layer overrides — 2026-08-18, CSS @layer restructuring (Basecamp "Fra Fizzy-gjennomgang: CSS-arkitektur"). See sand_ui/__sand_ui.css for the layer order. */
@layer overrides {
:root {
    /* --hue:160deg; */
    /* --hue:200deg; */
    /* --hue:40deg; */
    --hue:40deg;
    --saturation:20%;

    --brightness-0: 100%;
    --brightness-50: 95%;
    --brightness-100: 90%;
    --brightness-150: 85%;
    --brightness-200: 80%;
    --brightness-300: 70%;
    --brightness-400: 60%;
    --brightness-500: 50%;
    --brightness-600: 40%;
    --brightness-700: 30%;
    --brightness-800: 20%;
    --brightness-900: 10%;
    --brightness-950: 5%;

    --ui-0:    hsl(var(--hue), var(--saturation), var(--brightness-0));
    --ui-50:   hsl(var(--hue), var(--saturation), var(--brightness-50));
    --ui-100:  hsl(var(--hue), var(--saturation), var(--brightness-100));
    --ui-150:  hsl(var(--hue), var(--saturation), var(--brightness-150));
    --ui-200:  hsl(var(--hue), var(--saturation), var(--brightness-200));
    --ui-300:  hsl(var(--hue), var(--saturation), var(--brightness-300));
    --ui-400:  hsl(var(--hue), var(--saturation), var(--brightness-400));
    --ui-500:  hsl(var(--hue), var(--saturation), var(--brightness-500));
    --ui-600:  hsl(var(--hue), var(--saturation), var(--brightness-600));
    --ui-700:  hsl(var(--hue), var(--saturation), var(--brightness-700));
    --ui-800:  hsl(var(--hue), var(--saturation), var(--brightness-800));
    --ui-900:  hsl(var(--hue), var(--saturation), var(--brightness-900));
    --ui-950:  hsl(var(--hue), var(--saturation), var(--brightness-950));

    --text-0:    hsl(var(--hue), 8%, var(--brightness-0));
    --text-50:   hsl(var(--hue), 8%, var(--brightness-50));
    --text-100:  hsl(var(--hue), 8%, var(--brightness-100));
    --text-150:  hsl(var(--hue), 8%, var(--brightness-150));
    --text-200:  hsl(var(--hue), 8%, var(--brightness-200));
    --text-300:  hsl(var(--hue), 8%, var(--brightness-300));
    --text-400:  hsl(var(--hue), 8%, var(--brightness-400));
    --text-500:  hsl(var(--hue), 8%, var(--brightness-500));
    --text-600:  hsl(var(--hue), 8%, var(--brightness-600));
    --text-700:  hsl(var(--hue), 8%, var(--brightness-700));
    --text-800:  hsl(var(--hue), 8%, var(--brightness-800));
    --text-900:  hsl(var(--hue), 8%, var(--brightness-900));
    --text-950:  hsl(var(--hue), 8%, var(--brightness-950));

    --blue-hue:198.6deg;
    --blue-saturation:88.7%;

    --blue-0:    hsl(var(--blue-hue), var(--blue-saturation), var(--brightness-0));
    --blue-50:   hsl(var(--blue-hue), var(--blue-saturation), var(--brightness-50));
    --blue-100:  hsl(var(--blue-hue), var(--blue-saturation), var(--brightness-100));
    --blue-150:  hsl(var(--blue-hue), var(--blue-saturation), var(--brightness-150));
    --blue-200:  hsl(var(--blue-hue), var(--blue-saturation), var(--brightness-200));
    --blue-300:  hsl(var(--blue-hue), var(--blue-saturation), var(--brightness-300));
    --blue-400:  hsl(var(--blue-hue), var(--blue-saturation), var(--brightness-400));
    --blue-500:  hsl(var(--blue-hue), var(--blue-saturation), var(--brightness-500));
    --blue-600:  hsl(var(--blue-hue), var(--blue-saturation), var(--brightness-600));
    --blue-700:  hsl(var(--blue-hue), var(--blue-saturation), var(--brightness-700));
    --blue-800:  hsl(var(--blue-hue), var(--blue-saturation), var(--brightness-800));
    --blue-900:  hsl(var(--blue-hue), var(--blue-saturation), var(--brightness-900));
    --blue-950:  hsl(var(--blue-hue), var(--blue-saturation), var(--brightness-950));

    --green-hue:142.9deg;
    --green-saturation:76.5%;
    --green-0:    hsl(var(--green-hue), var(--green-saturation), var(--brightness-0));
    --green-50:   hsl(var(--green-hue), var(--green-saturation), var(--brightness-50));
    --green-100:  hsl(var(--green-hue), var(--green-saturation), var(--brightness-100));
    --green-150:  hsl(var(--green-hue), var(--green-saturation), var(--brightness-150));
    --green-200:  hsl(var(--green-hue), var(--green-saturation), var(--brightness-200));
    --green-300:  hsl(var(--green-hue), var(--green-saturation), var(--brightness-300));
    --green-400:  hsl(var(--green-hue), var(--green-saturation), var(--brightness-400));
    --green-500:  hsl(var(--green-hue), var(--green-saturation), var(--brightness-500));
    --green-600:  hsl(var(--green-hue), var(--green-saturation), var(--brightness-600));
    --green-700:  hsl(var(--green-hue), var(--green-saturation), var(--brightness-700));
    --green-800:  hsl(var(--green-hue), var(--green-saturation), var(--brightness-800));
    --green-900:  hsl(var(--green-hue), var(--green-saturation), var(--brightness-900));
    --green-950:  hsl(var(--green-hue), var(--green-saturation), var(--brightness-950));

    --red-50:#fff1f2;
    --red-100:#ffe4e6;
    --red-200:#fecdd3;
    --red-300:#fda4af;
    --red-400:#fb7185;
    --red-500:#f43f5e;
    --red-600:#e11d48;
    --red-700:#be123c;
    --red-800:#7f092a;
    --red-900:#59051e;
    --red-hsl:hsl(350, 89%, 60%);
    --red-h:350;
    --red-s:89%;
    --red-l:60%;

    --amber: #ffc107;
    --amber-50: #fff8e1;
    --amber-100: #ffecb3;
    --amber-200: #ffe082;
    --amber-300: #ffd54f;
    --amber-400: #ffca28;
    --amber-500: #ffc107;
    --amber-600: #ffb300;
    --amber-700: #ffa000;
    --amber-800: #ff8f00;
    --amber-900: #ff6f00;
    --amber-100-accent: #ffe57f;
    --amber-200-accent: #ffd740;
    --amber-400-accent: #ffc400;
    --amber-700-accent: #ffab00;

    --box-bg: var(--ui-0);
    --page-bg: var(--ui-0);
    --EEE: var(--ui-50);
    --CCC: var(--ui-100);
    --bg-color: var(--ui-0);
    --border-color: #D0CFC8;
    --border-color-light: #E8E7E4;
    --text-color: #000;

    --solid-color:#000;
    --solid-text-color: #FFF;

    --signal: #FCB35B;
    --signal-light:#ffeed5;
    --signal-dark: #f87b17;

}

@media (prefers-color-scheme: dark) {

    :root {
        /* --hue:200deg; */
        --hue:200deg;
        --saturation:30%;

        --brightness-0: 15%;
        --brightness-50: 20%;
        --brightness-100: 25%;
        --brightness-150: 30%;
        --brightness-200: 35%;
        --brightness-300: 40%;
        --brightness-400: 45%;
        --brightness-500: 50%;
        --brightness-600: 60%;
        --brightness-700: 70%;
        --brightness-800: 80%;
        --brightness-900: 90%;
        --brightness-950: 95%;

        --text-color: var(--ui-800);
        --border-color: var(--ui-150);
        --border-color-light: var(--ui-100);

        --base-50: var(--hue), var(--saturation), 5%;
        --base-100: var(--hue), var(--saturation), 10%;
        --base-150: var(--hue), var(--saturation), 15%;
        --base-200: var(--hue), var(--saturation), 20%;
        --base-300: var(--hue), var(--saturation), 30%;
        --base-400: var(--hue), var(--saturation), 40%;
        --base-500: var(--hue), var(--saturation), 50%;
        --base-600: var(--hue), var(--saturation), 60%;
        --base-700: var(--hue), var(--saturation), 70%;
        --base-800: var(--hue), var(--saturation), 80%;
        --base-900: var(--hue), var(--saturation), 88%;
        --base-950: var(--hue), var(--saturation), 90%;
        --base-0: var(--hue), var(--saturation), 95%;



        --solid-color: var(--ui-800);
        --solid-text-color: var(--ui-50);
    }
}


} /* @layer overrides */

@layer utilities {
    .bg-white { background-color: white; }
    .bg-black { background-color: black; }

    .bg-signal { background-color: var(--signal); }
    .bg-signal-light { background-color: var(--signal-light); }
    .bg-signal-dark { background-color: var(--signal-dark); }

    .text-white { color: white; }
    .text-black { color: black; }
    .text-signal { color: var(--signal); }
    .text-signal-light { color: var(--signal-light); }
    .text-signal-dark { color: var(--signal-dark); }

    .border-signal { border-color: var(--signal); }
    .border-signal-light { border-color: var(--signal-light); }
    .border-signal-dark { border-color: var(--signal-dark); }

    .fill-ui-50 { fill: var(--ui-50); }
    .fill-ui-100 { fill: var(--ui-100); }
    .fill-ui-200 { fill: var(--ui-200); }
    .fill-ui-300 { fill: var(--ui-300); }
    .fill-ui-400 { fill: var(--ui-400); }
    .fill-ui-500 { fill: var(--ui-500); }
    .fill-ui-600 { fill: var(--ui-600); }
    .fill-ui-700 { fill: var(--ui-700); }
    .fill-ui-800 { fill: var(--ui-800); }
    .fill-ui-900 { fill: var(--ui-900); }
    .fill-ui-950 { fill: var(--ui-950); }

    .bg-ui-0 { background-color: var(--ui-0); }
    .bg-ui-50 { background-color: var(--ui-50); }
    .bg-ui-100 { background-color: var(--ui-100); }
    .bg-ui-150 { background-color: var(--ui-150); }
    .bg-ui-200 { background-color: var(--ui-200); }
    .bg-ui-300 { background-color: var(--ui-300); }
    .bg-ui-400 { background-color: var(--ui-400); }
    .bg-ui-500 { background-color: var(--ui-500); }
    .bg-ui-600 { background-color: var(--ui-600); }
    .bg-ui-700 { background-color: var(--ui-700); }
    .bg-ui-800 { background-color: var(--ui-800); }
    .bg-ui-900 { background-color: var(--ui-900); }
    .bg-ui-950 { background-color: var(--ui-950); }

    .bg-red-50 { background-color: var(--red-50); }
    .bg-red-100 { background-color: var(--red-100); }
    .bg-red-200 { background-color: var(--red-200); }
    .bg-red-300 { background-color: var(--red-300); }
    .bg-red-400 { background-color: var(--red-400); }
    .bg-red-500 { background-color: var(--red-500); }
    .bg-red-600 { background-color: var(--red-600); }
    .bg-red-700 { background-color: var(--red-700); }
    .bg-red-800 { background-color: var(--red-800); }
    .bg-red-900 { background-color: var(--red-900); }
    .bg-red-950 { background-color: var(--red-950); }

    .text-amber-600 { color: var(--amber-600); }
    .text-green-600 { color: var(--green-600); }
    .text-blue-600 { color: var(--blue-600); }
    .text-red-600 { color: var(--red-600); }


    .text-ui-50 { color: var(--ui-50); }
    .text-ui-100 { color: var(--ui-100); }
    .text-ui-150 { color: var(--ui-150); }
    .text-ui-200 { color: var(--ui-200); }
    .text-ui-300 { color: var(--ui-300); }
    .text-ui-400 { color: var(--ui-400); }
    .text-ui-500 { color: var(--ui-500); }
    .text-ui-600 { color: var(--ui-600); }
    .text-ui-700 { color: var(--ui-700); }
    .text-ui-800 { color: var(--ui-800); }
    .text-ui-900 { color: var(--ui-900); }
    .text-ui-950 { color: var(--ui-950); }
}