/*==================================================================
//
//  theme/dark.css
//
//  ENBART FÄRGER. Ingen layout, inga mått, inga typsnitt.
//
//  Formen ligger i /assets/css/base.css och hämtar varje färg
//  härifrån som var(--namn). Ett nytt tema skapas genom att
//  kopiera den här filen, ändra värdena och lägga till en rad i
//  THEME_AVAILABLE i /private_content/__config/config.php
//
//  Alla variabler nedan MÅSTE finnas i varje tema.
//
==================================================================*/

:root {

    /*--------------------------------------------------------------
    //	Bakgrund
    //
    //  Tre lager som base.css lägger ovanpå varandra i .backdrop:
    //  två svaga ljussken och en grundton.
    --------------------------------------------------------------*/

    --color-bg: #05070c;

    --backdrop-base: linear-gradient(180deg, #070a11 0%, #05070c 55%, #04060a 100%);
    --backdrop-glow-1: radial-gradient(900px 620px at 12% -8%, rgba(56, 189, 214, 0.16), rgba(5, 7, 12, 0) 68%);
    --backdrop-glow-2: radial-gradient(760px 540px at 88% 4%, rgba(104, 118, 255, 0.14), rgba(5, 7, 12, 0) 62%);


    /*--------------------------------------------------------------
    //	Text
    --------------------------------------------------------------*/

    --color-text: #c2ccd9;
    --color-text-muted: #8b97a8;
    --color-text-faint: #66727f;
    --color-heading: #eef3fa;

    /* Används när rubriken fylls med en toning istället för färg */
    --color-heading-transparent: transparent;


    /*--------------------------------------------------------------
    //	Ytor och linjer
    --------------------------------------------------------------*/

    --color-surface: rgba(19, 25, 35, 0.72);
    --color-surface-hover: rgba(38, 48, 64, 0.72);

    /*  Samma yta men UTAN genomskinlighet.

        Behövs av det som ligger stilla medan annat scrollar under
        det - byggbokens första kolumn och dess rubrikrad. En
        genomskinlig sådan visar innehållet som passerar bakom, och
        då går den inte att läsa. */
    --color-surface-solid: #131923;

    --color-border: rgba(255, 255, 255, 0.10);
    --color-border-soft: rgba(255, 255, 255, 0.06);
    --color-border-strong: rgba(255, 255, 255, 0.20);


    /*--------------------------------------------------------------
    //	Formulärfält
    //
    //  Rutan man skriver i ska vara mörkare än panelen bakom, så
    //  att det syns var man kan skriva.
    --------------------------------------------------------------*/

    --color-input: rgba(4, 6, 11, 0.65);
    --color-input-border: rgba(255, 255, 255, 0.14);

    /* Text ovanpå accentfärgen, t.ex. i huvudknappen */
    --color-on-accent: #05070c;


    /*--------------------------------------------------------------
    //	Länkar och fokus
    --------------------------------------------------------------*/

    --color-link: #63d3e6;
    --color-link-hover: #9fe6f2;
    --color-focus: #63d3e6;


    /*--------------------------------------------------------------
    //	Signalfärger (meddelanderutor)
    --------------------------------------------------------------*/

    --color-info: #63d3e6;
    --color-success: #3ecf8e;
    --color-warning: #f0b429;
    --color-danger: #ff5f73;


    /*--------------------------------------------------------------
    //	Toningar och skuggor
    --------------------------------------------------------------*/

    --gradient-accent: linear-gradient(135deg, #38bdd6 0%, #6876ff 100%);
    --gradient-heading: linear-gradient(100deg, #eef3fa 18%, #7fdcec 58%, #8f9dff 96%);

    --shadow-card: 0 24px 60px -38px rgba(0, 0, 0, 0.95);
    --shadow-accent: 0 10px 28px -12px rgba(56, 189, 214, 0.55);
}