/* ==========================================================================
   A FELÜLET SZÍNEI - EGY FORRÁS, KÉT OLDAL
   ==========================================================================
   !!! MIÉRT KÜLÖN FÁJL (2026-09-19): eddig ez a blokk a style.css elején állt, azt
   viszont CSAK a szerkesztő tölti be. Az admin pult újraépítésekor ugyanezekre a
   színekre volt szükség - a választás vagy az volt, hogy a pult a saját másolatát
   hordozza (akkor egy arculatváltás a felét átszínezi, a felét nem), vagy hogy a
   blokk KIKERÜL ide, és mindkét lap ugyanezt a fájlt hivatkozza. A második a DRY
   szabály szerinti: egy tudás egy helyen.
   AKI AZ ARCULATOT VÁLTOZTATJA, CSAK EZT A FÁJLT ÍRJA ÁT.
   Betöltési sorrend: szinek.css ELŐBB, mint style.css / pult.css. */

/* ==========================================
    MODERN SZÍNPALETTA ÉS VÁLTOZÓK
    ========================================== */
:root {
    /* ======================================================================
       A MÁRKASZÍNEK EGY HELYEN (2026-09-06).
       MIÉRT: az arculatváltásnál kiderült, hogy a felület színei több tucat helyen
       hardcode-olva voltak (#eff6ff, #60a5fa, #bfdbfe, #dde4ec...), a változókat
       megkerülve. Egy átszínezés így szanaszét hagyott volna régi árnyalatokat.
       MOSTANTÓL: aki az arculatot változtatja, CSAK EZT A BLOKKOT írja át.
       !!! AMIHEZ ITT NEM SZABAD NYÚLNI: a HÍRLEVÉL alapértékei (CTA-gomb, termékkártya
       gombja, kupon sáv) az app.js-ben ülnek, és azok az ÜGYFÉL leveleinek színei -
       nem a mi arculatunk. Ha azokat átírod, MEGVÁLTOZNAK a már elkészült hírlevelek. */
    --primary: #4A6B8C;       
    --primary-hover: #3B5672; 
    --on-primary: #FFFFFF;           /* szöveg a márkaszínen - a kontrasztot ellenőrizni kell! */
    --primary-soft: #E7EAEE;         /* halvány, márkaszínnel rokon háttér */
    --primary-soft-border: #B8C7D6;  /* a halvány háttér kerete */
    --primary-soft-text: #344D65;    /* sötét szöveg a halvány háttéren */
    --accent-light: #5980A6;         /* világos kiemelés: jelvény, ikon sötét sávon */
    --primary-faint: #87A2BD;        /* CSAK a hover kijelölő keretének - ld. lent, miért */
    --bg-subtle: #EBEBED;            /* enyhén elváló felület */
    --bg-sunken: #DDDEE1;            /* mélyített felület: előnézet háttere, vágóterület */
    --surface-dark: #1D2D3D;         /* sötét sávok: lebegő formázó, előnézet fejléce */
    --surface-dark-hover: #2E445A;
    --surface-dark-line: #38526C;
    --on-surface-dark: #F2F2F3;      /* szöveg a sötét sávokon */
    --checker: #D8DADD;              /* átlátszóság-kockás minta */
    --ui-grey: #9299A1;              /* panel-ábrák töltőszíne */
    --ui-grey-light: #C3C7CB;        /* ugyanaz halványabban */
    /* AZ ÉRTESÍTŐ CSÍK két riasztó szintje (a harmadik, a tájékoztató, a márka halvány
       színeit kapja). A szöveg mindkét háttéren 7:1 fölött olvasható. */
    --riaszt-bg: #FEE2E2;  --riaszt-szel: #FCA5A5;  --riaszt-szoveg: #7F1D1D;
    --figyelmeztet-bg: #FEF3C7;  --figyelmeztet-szel: #FCD34D;  --figyelmeztet-szoveg: #78350F;

    /* A MÁRKA SAJÁT SZÍNEI. Ezek a logó fix értékei - NEM a felület témája.
       A felület színei (fent) ezekből származhatnak, de a logó SOSEM változik velük:
       ha valaki átszínezi a felületet, a márkajelnek akkor is ugyanúgy kell kinéznie. */
    --brand-steel: #5980A6;
    --brand-deep: #1D2D3D;
    --brand-paper: #F2F2F3;
    --brand-ink: #1D1F20;
    --bg-body: #F2F2F3;
    --bg-panel: #FFFFFF;
    --text-main: #1D1F20;
    --text-muted: #68696A;
    --border: #DDDEE1;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --radius: 6px;
}