/*==================================================================
//
//  theme/light.css
//
//  ENBART FÄRGER, ljus variant. Se theme/dark.css för hur filen
//  hänger ihop med base.css.
//
//  Variabellistan är identisk med dark.css - samma namn, andra
//  värden. Saknas en variabel här får den komponenten ingen färg,
//  så listan ska hållas komplett.
//
==================================================================*/

:root {

    /*--------------------------------------------------------------
    //	Bakgrund
    --------------------------------------------------------------*/

    --color-bg: #f4f6fa;

    --backdrop-base: linear-gradient(180deg, #ffffff 0%, #f4f6fa 60%, #eef1f7 100%);
    --backdrop-glow-1: radial-gradient(900px 620px at 12% -8%, rgba(56, 189, 214, 0.18), rgba(244, 246, 250, 0) 66%);
    --backdrop-glow-2: radial-gradient(760px 540px at 88% 4%, rgba(104, 118, 255, 0.14), rgba(244, 246, 250, 0) 60%);


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

    --color-text: #33415a;
    --color-text-muted: #5b6b85;
    --color-text-faint: #8593a8;
    --color-heading: #101826;

    --color-heading-transparent: transparent;


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

    --color-surface: rgba(255, 255, 255, 0.86);
    --color-surface-hover: rgba(226, 233, 244, 0.9);

    /*  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: #ffffff;

    --color-border: rgba(16, 24, 38, 0.12);
    --color-border-soft: rgba(16, 24, 38, 0.08);
    --color-border-strong: rgba(16, 24, 38, 0.24);


    /*--------------------------------------------------------------
    //	Formulärfält
    --------------------------------------------------------------*/

    --color-input: #ffffff;
    --color-input-border: rgba(16, 24, 38, 0.18);

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


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

    --color-link: #0f7d92;
    --color-link-hover: #0a5c6d;
    --color-focus: #0f7d92;


    /*--------------------------------------------------------------
    //	Signalfärger
    --------------------------------------------------------------*/

    --color-info: #0f7d92;
    --color-success: #1c8f5f;
    --color-warning: #b57608;
    --color-danger: #c9304a;


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

    --gradient-accent: linear-gradient(135deg, #1aa2bd 0%, #5566ee 100%);
    --gradient-heading: linear-gradient(100deg, #101826 18%, #12879e 58%, #4a5ae0 96%);

    --shadow-card: 0 20px 46px -34px rgba(16, 24, 38, 0.45);
    --shadow-accent: 0 10px 26px -14px rgba(26, 162, 189, 0.5);
}