/*
 * Designtokens enligt trunk/GrafiskDesignWeb.md.
 *
 * Färger skall aldrig hårdkodas i komponenter — de hämtas härifrån.
 *
 * Två tillstånd: :root definierar hela den ljusa paletten, och mediefrågan
 * skriver om samma nycklar för mörkt läge. Sajten följer enbart användarens
 * eller webbläsarens inställning; någon manuell temaväljare är medvetet inte
 * byggd, så den avvikelsen från profilen är beslutad, inte förbisedd.
 *
 * Varje färgnyckel måste finnas i båda blocken. Definieras en färg bara i
 * mediefrågan får ljusa läget ingen — det är den klassiska buggen här.
 */

:root {
    /* Bakgrunder och ytor */
    --bg-page: #f4f6f8;
    --bg-surface: #ffffff;
    --bg-raised: #ffffff;

    /* Text */
    --text-primary: #1a1a2e;
    /* #6b7280 ur profilen ger 4,46:1 mot sidbakgrunden, marginellt under
       AA. Knappt urskiljbar justering som får den över gränsen. */
    --text-secondary: #656c78;
    --text-on-fill: #ffffff;

    /* Kantlinjer */
    /* --border är dekorativ (kortkanter, avdelare) och har inget
       kontrastkrav. --border-input är gränsen på formulärfält och måste nå
       3:1 mot ytan enligt WCAG 1.4.11. */
    --border: #e2e6ea;
    --border-strong: #c9d1d8;
    --border-input: #8b96a1;

    /* Temafärg. Fylld variant är samma i båda teman; textvarianten ljusare
       i dark mode eftersom #0085c2 inte når 4,5:1 mot mörk bakgrund. */
    --theme-fill: #0085c2;
    --theme-fill-hover: #006a9e;
    /* Profilen anger #0085c2 även som textfärg, men den når bara 4,09:1 mot
       vitt och 3,78:1 mot sidbakgrunden — under AA:s 4,5. Textvarianten är
       därför mörkare, vilket är samma princip som profilen redan tillämpar i
       dark mode (där den i stället ljusas upp till #4db8e8).
       #006a9e finns redan i profilen som hover-färg. Se Fas0-Handover.md. */
    --theme-text: #006a9e;
    --theme-text-hover: #00618f;
    --theme-tint: #e8f4fb;

    /* Accentfärg, används sparsamt */
    --accent-fill: #d33232;
    --accent-fill-hover: #a82828;
    --accent-text: #d33232;
    --accent-text-hover: #a82828;
    --accent-tint: #fef4f3;

    /* Elevation */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.16);

    /* Överlägg, t.ex. modalbakgrund och textplattor på bild */
    --overlay-strong: rgba(0, 0, 0, 0.9);
    --overlay-medium: rgba(0, 0, 0, 0.8);
    --overlay-soft: rgba(0, 0, 0, 0.5);

    /* Kartans färger, härledda ur paletten */
    --map-ocean: #eef2f5;
    --map-land: #d8dee4;
    --map-border: #c2cad2;




    /* Platta bakom kundlogotyper. Helvit i BÅDA teman — flera logotyper är
       gjorda för vit bakgrund och fungerar inte mot något annat, varken mot
       en mörk yta eller mot en bruten vit. Kantlinjen är svart med låg
       opacitet så att den fungerar mot vitt oavsett tema. */
    --logo-plate: #ffffff;
    --logo-plate-border: rgba(0, 0, 0, 0.10);
    /* Några kundlogotyper finns bara som vit urstansning och blir osynliga
       mot vitt. De får en mörk platta i stället, markerad per kund med
       "logoPlate": "dark" i installations.js. */
    --logo-plate-dark: #2b3038;
    --logo-plate-dark-border: rgba(255, 255, 255, 0.14);

    /* Radie enligt profilens skala */
    --r-xs: 3px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-full: 9999px;

    /* Rörelse */
    --t-hover: 100ms ease-out;
    --t-overlay: 150ms ease-out;
    --t-modal: 200ms ease-out;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-page: #0f1117;
        --bg-surface: #1a1d27;
        --bg-raised: #222538;

        --text-primary: #e8eaed;
        --text-secondary: #9aa0ac;
        --text-on-fill: #ffffff;

        --border: #2e3347;
        --border-strong: #3d4459;
        --border-input: #66718f;

        --theme-fill: #0085c2;
        --theme-fill-hover: #006a9e;
        --theme-text: #4db8e8;
        --theme-text-hover: #79cfef;
        --theme-tint: #0a1e2e;

        --accent-fill: #d33232;
        --accent-fill-hover: #a82828;
        --accent-text: #f07070;
        --accent-text-hover: #f59090;
        --accent-tint: #2a1618;

        /* Skuggor syns knappt mot mörk bakgrund — profilen ersätter dem med
           en ljusare yta, vilket sker via --bg-surface och --bg-raised. */
        --shadow-subtle: none;
        --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.4);
        --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.6);

        --overlay-strong: rgba(0, 0, 0, 0.92);
        --overlay-medium: rgba(0, 0, 0, 0.85);
        --overlay-soft: rgba(0, 0, 0, 0.6);

        --map-ocean: #141922;
        --map-land: #263040;
        --map-border: #2e3347;


        /* Oförändrade — se kommentaren i :root */
        --logo-plate: #ffffff;
        --logo-plate-border: rgba(0, 0, 0, 0.10);
        --logo-plate-dark: #2b3038;
        --logo-plate-dark-border: rgba(255, 255, 255, 0.14);
    }
}