/* ============================================================================
   Téma: Clean Pearl (Prémium Törtfehér / Mélyített Világos Téma)
   Fájl: miniweb/templates/modern_glow/theme-light.css
   Leírás: Agresszív kontrasztok, mély kékesszürke hátterek, tiszta fehér 
   kártyák erős 3D árnyékokkal. A Hero szekció szövegének kényszerített inverziója!
============================================================================ */

:root {
    /* Hátterek - SOKKAL mélyebb alapok a "kórházi" hatás elkerülésére */
    --bg-body: #e2e8f0;       /* Határozott kékesszürke alap, nem vakít! */
    --bg-section: #cbd5e1;    /* Még sötétebb szürke az elválasztó részekhez */
    --bg-card: #ffffff;       /* Tiszta hófehér kártyák (brutális kontraszt a háttérrel) */
    --bg-input: #f1f5f9;      /* Enyhén színezett beviteli mezők */
    --bg-deepest: #94a3b8;    /* Sötét szürke a kontúrokhoz */
    
    /* Áttetsző rétegek (Glassmorphism) */
    --bg-glass: rgba(255, 255, 255, 0.85);       /* Erős, tejüveg hatás */
    --bg-glass-dark: rgba(255, 255, 255, 0.98);  /* Szinte tömör fehér */
    --bg-light-glass: rgba(15, 23, 42, 0.06);    /* Sötétítés a hover effektekhez */
    --overlay-bg: rgba(15, 23, 42, 0.85);        /* Erős sötétítés a modal mögé */
    
    /* Szövegszínek - Fekete helyett mély éjkék/szürke a prémium hatásért */
    --text-light: #0f172a;    /* Nagyon mély palaszürke a címsoroknak */
    --text-main: #334155;     /* Határozott sötétszürke a folyószövegnek */
    --text-muted: #64748b;    /* Középszürke apróbetűknek */
    --text-darker: #475569;   
    --btn-text-hover: #ffffff;/* Gombokon a szöveg hover állapotban tiszta fehér */
    
    /* Szegélyek (Borders) és Élkiemelések - Határozottabb vonalak */
    --border-color: rgba(15, 23, 42, 0.15);      
    --border-light: rgba(15, 23, 42, 0.08);         
    --border-subtle: rgba(15, 23, 42, 0.05);
    
    /* Árnyékok (Shadows) - AGRESSZÍV, erős sötét árnyékok, hogy lebegjen minden! */
    --shadow-light: 0 4px 6px -1px rgba(15, 23, 42, 0.15), 0 2px 4px -1px rgba(15, 23, 42, 0.08);
    --shadow-base: 0 10px 20px -5px rgba(15, 23, 42, 0.25), 0 4px 6px -2px rgba(15, 23, 42, 0.1);
    --shadow-heavy: 0 25px 50px -12px rgba(15, 23, 42, 0.4); /* Brutális 3D vetett árnyék */
    
    /* Navigáció */
    --bg-nav: rgba(255, 255, 255, 0.95);          
    
    /* Mintázat színe */
    --pattern-color: rgba(15, 23, 42, 0.04);        

    /* --- Glassmorphism specifikus változók a világos témához --- */
    --glass-bg: rgba(255, 255, 255, 0.8); 
    --glass-border: rgba(15, 23, 42, 0.1); /* Erősebb sötét perem, határozott kontúr */
    /* Zseniális 3D árnyék: Kívül sötét, belül felül fehér fény (emboss), belül alul finom árnyék */
    --glass-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.3), inset 0 2px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(15, 23, 42, 0.05); 
    
    /* Lebegő fénygömbök - Erősebb pasztell színek a szürke háttéren */
    --orb-1-color: rgba(14, 165, 233, 0.25); /* Óceánkék aura */
    --orb-2-color: rgba(139, 92, 246, 0.25); /* Elektromos lila aura */
}

/* ============================================================================
   KIEGÉSZÍTŐ STÍLUSOK (CSAK A VILÁGOS TÉMÁHOZ)
   Mélység, text-shadow és 3D kiemelések
============================================================================ */

/* A naptár ikon sötét maradjon */
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.8;
}

/* ============================================================================
   KULCSFONTOSSÁGÚ: HERO SZEKCIÓ INVERZIÓJA!
   Mivel a Hero háttere videó/kép, világos témánál kényszeríteni kell 
   a fehér szöveget erős fekete árnyékkal, különben olvashatatlan!
============================================================================ */
/*
   A Hero és az Index szövegeinek színét, betűtípusát és árnyékát a közös
   sablonstílus, illetve a mentett Index-beállítások határozzák meg.
   A világos téma itt kizárólag a témafelületeket módosítja.
*/

/* ============================================================================
   MÉLYSÉG ÉS 3D HATÁSOK KÉNYSZERÍTÉSE
============================================================================ */

/* Beviteli mezők (Inputok) erős belső mélysége (Letterpress hatás) */
.form-group input, .form-group select, #contact-form input, #contact-form textarea {
    box-shadow: inset 0 3px 8px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    background-color: #f1f5f9 !important;
}

/* Felső Navigáció (Header) határozott elkülönítése a tartalomtól */
.mw-nav::before {
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.15), 0 1px 0 rgba(15, 23, 42, 0.05) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
}

/* A táblák (content-box) kapjanak határozott kontúrt */
.content-box {
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
}

/* Lábléc (Footer) egyedi mélyített háttere és felső pereme */
.mw-footer {
    background: linear-gradient(to bottom, #e2e8f0 0%, #cbd5e1 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 -10px 40px rgba(15, 23, 42, 0.08) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.15) !important;
}