/*==================================================================
//
//  theme/light.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. Saknas en blir
//  det som använder den osynligt eller oläsbart, och felet syns
//  bara på den sida som råkar använda just den. /dev/style/ finns
//  för att kunna se hela uppsättningen på en gång.
//
//
//  OM DEN HÄR UPPSÄTTNINGEN
//
//  Neutral gråskala, med flit. Den är tänkt att MÅLAS OM per
//  projekt: byt --color-accent och dess grannar mot projektets
//  färg, så följer knappar, logotyp och fokusmarkering med.
//
//  Signalfärgerna är däremot RIKTIGA färger även här, och det är
//  inte en inkonsekvens. En varning som är grå är ingen varning -
//  färgen är information i de fyra fallen och pynt i alla andra.
//
==================================================================*/

:root {

    /*--------------------------------------------------------------
    //	Bakgrund och ytor
    //
    //  Tre nivåer: sidans botten, en panel ovanpå den, och något
    //  som ligger ovanpå panelen (en tabellrubrik, ett märke).
    --------------------------------------------------------------*/

    --color-bg: #f4f5f7;

    --color-surface: #ffffff;
    --color-surface-strong: #eef0f3;
    --color-surface-hover: #e6e9ed;

    /*  Bakom en ruta som fällts ut (.modal::backdrop).

        Mörkläggningen hör till TEMAT och inte till formen: samma
        genomskinliga svarta yta ger olika resultat på en ljus och en
        mörk botten, och i ett ljust tema räcker det med mindre. */
    --color-backdrop: rgba(20, 23, 28, 0.45);


    /*--------------------------------------------------------------
    //	Text
    //
    //  Fyra styrkor. --text är brödtext, --heading det som ska
    //  sticka fram, --muted det som får träda tillbaka och
    //  --faint det som knappt behöver läsas.
    --------------------------------------------------------------*/

    --color-text: #2b2f36;
    --color-heading: #14171c;
    --color-text-muted: #5c636e;
    --color-text-faint: #878e99;


    /*--------------------------------------------------------------
    //	Linjer
    --------------------------------------------------------------*/

    --color-border: #d9dde3;
    --color-border-soft: #e7eaee;
    --color-border-strong: #b9c0ca;


    /*--------------------------------------------------------------
    //	Formulärfält
    //
    //  Rutan man skriver i ska skilja sig från panelen bakom, så
    //  att det syns var man kan skriva.
    --------------------------------------------------------------*/

    --color-input: #ffffff;
    --color-input-border: #c6ccd4;


    /*--------------------------------------------------------------
    //	Accent
    //
    //  DET HÄR ÄR RADEN DU BYTER FÖRST i ett nytt projekt.
    //  Huvudknappen, logotypmärket och fokusmarkeringen hämtar
    //  alla härifrån.
    //
    //  --on-accent är texten OVANPÅ accentfärgen och måste ha
    //  tillräcklig kontrast mot den. Byter du accent, kontrollera
    //  den här också.
    --------------------------------------------------------------*/

    --color-accent: #2b2f36;
    --color-accent-hover: #14171c;
    --color-on-accent: #ffffff;


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

    --color-link: #1f5fbf;
    --color-link-hover: #14428a;
    --color-focus: #1f5fbf;


    /*--------------------------------------------------------------
    //	Signalfärger
    //
    //  De fyra typerna i meddelanderutorna, plus knappen som tar
    //  bort något. Se rutan högst upp om varför de är färgade även
    //  i ett gråskaletema.
    --------------------------------------------------------------*/

    --color-info: #1f5fbf;
    --color-success: #1d7a4c;
    --color-warning: #b5710a;
    --color-danger: #b3261e;

    /* Ramen runt en farlig knapp innan man pekat på den, och
       texten på den när man gjort det */
    --color-danger-border: #e0a5a1;
    --color-on-danger: #ffffff;
}