/* Tema întunecată — SINGURUL fișier cu stiluri de dark mode din tot proiectul. Activată prin atributul data-theme="dark" pe (setat server-side din cookie-ul "theme", vezi _Layout.cshtml + ThemeCookie.cs), comutată client-side de wwwroot/js/theme.js. Suprascrie DOAR variabilele CSS din variables.css — light mode (:root, fără atribut) rămâne complet neatins, orice componentă existentă moștenește automat noile valori fără nicio altă modificare de fișier, pentru că totul e deja construit pe var(--color-*). Excepție intenționată — 4 variabile NU sunt suprascrise aici, rămân identice în ambele teme: --color-bg-inverse / --color-content-inverse / --color-border-inverse-primary / -secondary. Acestea reprezintă accente permanent-închise la culoare (TopBar, meniul de categorii, Footer/PromoBanner pe fundal închis) — sunt "închise" ca alegere de brand, nu ca opus al temei curente; le-aș fi inversat spre deschis în dark mode, ceea ce ar fi stricat exact componentele care trebuie să rămână închise la culoare indiferent de temă. */ :root[data-theme="dark"] { /* Culori de fundal */ --color-bg-primary: #0B0D10; --color-bg-secondary: #16181D; --color-bg-tertiary: #343943; --color-bg-brand: #3C69F6; --color-bg-brand-secondary: #17223C; --color-bg-button-primary: #3C69F6; --color-bg-button-primary-hover: #2F55D1; --color-bg-button-primary-press: #25409C; --color-bg-button-secondary: #1B1E24; --color-bg-button-secondary-active: #E9EAEB; --color-bg-button-secondary-disabled: #23262D; --color-bg-button-tertiary: #23262D; --color-bg-button-tertiary-hover: #343943; --color-bg-button-tertiary-press: #454B56; --color-bg-button-special: #1B1E24; --color-bg-negative: #3A1C19; --color-bg-warning: #3A2A16; --color-bg-informative: #16283C; --color-bg-partner: #241B3D; --color-bg-ai: #2D1A3C; --color-bg-loyalty: #182140; --color-bg-positive: #143229; --color-bg-verified-purchase: #143229; --color-bg-discount: #E5432A; --color-bg-popular: #3B3016; --color-bg-switch-light: #3B3016; --color-bg-rating: #302912; --color-bg-modal: rgba(0, 0, 0, 0.65); /* Culori de conținut (text/iconițe) */ --color-content-primary: #F1F2F4; --color-content-secondary: #BFC5CE; --color-content-tertiary: #9AA3B0; --color-content-subtle: #454B56; --color-content-brand: #7A9BFF; --color-content-button-secondary: #F1F2F4; --color-content-button-tertiary: #F1F2F4; --color-content-button-secondary-active: #101828; --color-content-button-special-primary: #F1F2F4; --color-content-button-special-secondary: #9AA3B0; --color-content-negative-primary: #F0705A; --color-content-negative-secondary: #FF8A73; --color-content-warning-primary: #F0954A; --color-content-informative: #7CADEF; --color-content-ai-primary: #C77EE8; --color-content-loyalty-primary: #7A9BFF; --color-content-loyalty-secondary: #7A9BFF; --color-content-positive-primary: #4FCB9B; --color-content-positive-secondary: #3DDBA3; --color-content-positive-tertiary: #4FE3AC; --color-content-popular: #FF8A73; --color-content-popular-inverse: #E8C468; --color-content-switch-light: #E8C468; --color-content-partner-primary: #A98BFF; --color-content-partner-secondary: #9884E0; --color-content-rating-primary: #E8C468; --color-content-rating-secondary: #FFC93D; --color-content-rating-tertiary: #6B5A2E; /* Culori de bordură */ --color-border-primary: #23262D; --color-border-secondary: #343943; --color-border-tertiary: #5B6470; --color-border-brand: #5B82FF; --color-border-brand-secondary: #2C3F70; --color-border-product: #1B1E24; --color-border-button-secondary: #343943; --color-border-button-secondary-hover: #454B56; --color-border-button-secondary-press: #5B6470; --color-border-button-secondary-active: #C7CCD3; --color-border-negative-primary: #C24A34; --color-border-negative-secondary: #8C3D2C; --color-border-negative-tertiary: #5C2A20; --color-border-informative: #24466E; --color-border-switch-light: #4A3B14; --color-border-partner: #362C5C; --color-border-loyalty: #263356; --color-border-positive: #1F4A3B; --color-border-ai: #3E2A4D; /* Umbre — negru mai opac, cel din light mode abia s-ar vedea pe fundal deja închis */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-hover: 0 1px 8px 0 rgba(0, 0, 0, 0.6); /* Variabilele PROPRII Bootstrap (nu ale noastre) — .modal-content/.dropdown-menu/.offcanvas/.card nefolosite direct cu clase custom moștenesc din --bs-body-bg/--bs-body-color, nu din var(--color-bg-primary); fără astea rămân albe în dark mode (ex. LanguageSelect). */ --bs-body-bg: #0B0D10; --bs-body-color: #F1F2F4; --bs-border-color: #23262D; --bs-border-color-translucent: rgba(255, 255, 255, 0.1); --bs-secondary-bg: #16181D; --bs-secondary-color: rgba(241, 242, 244, 0.75); --bs-tertiary-bg: #16181D; --bs-tertiary-color: rgba(241, 242, 244, 0.5); --bs-emphasis-color: #FFFFFF; --bs-link-color: #7A9BFF; --bs-link-hover-color: #9BB4FF; } /* Elemente cu utilitare Bootstrap de culoare FIXĂ (bg-white), nelegate de var(--color-*) — găsite prin audit direct: .navbar-row (header) folosea bg-white în loc de --color-bg-primary, rămânea alb în dark mode. .bg-white generic acoperă și restul elementelor cu acest tipar (ex. o imagine de produs din Cart). */ :root[data-theme="dark"] .navbar-row { background-color: var(--color-bg-primary) !important; } :root[data-theme="dark"] .bg-white { background-color: var(--color-bg-secondary) !important; } /* Iconițe SVG statice () — culoarea e "arsă" în fișier, CSS nu poate coloră direct o imagine externă. invert(1) hue-rotate(180deg) e o identitate matematică exactă: păstrează hue+saturația, inversează DOAR luminozitatea (negru→alb, gri mediu→gri mediu ușor mai deschis) — de-aia se adaugă și un brightness suplimentar, altfel iconițele gri (#717680, cele mai multe din set) rămân tot gri, doar marginal mai deschise. Excluse — verificat direct conținutul fiecărui fișier SVG, nu doar numele: - sigle de brand/plată cu culori FIXE de brand (Apple/Google/Facebook — varianta "-brand-"/colorată, NU facebook-logo.svg/instagram-logo.svg/tiktok-logo.svg, care sunt iconițe simple gri închis, nu sigle — acelea TREBUIE inversate ca orice altă iconiță, altfel rămân invizibile în Footer); - iconițe deja albe ("stroke/fill=white"), plasate pe fundaluri colorate fixe care rămân la fel în ambele teme (buton albastru, bannere, cardul de profil): list.svg (butonul Categorii), pencil.svg (creion editare, pe cardul de profil albastru), medal.svg, arrow-right-banner.svg, arrow-right-solid.svg — niciunul nu are sufixul "-white" în nume, găsite prin căutare în conținut, nu presupunere. */ :root[data-theme="dark"] img[src*="/images/icons/"]:not([src*="apple-logo.svg"]):not([src*="google-logo.svg"]):not([src*="facebook-brand-logo.svg"]):not([src*="payment-"]):not([src*="-white.svg"]):not([src*="medal.svg"]):not([src*="list.svg"]):not([src*="pencil.svg"]):not([src*="arrow-right-banner.svg"]):not([src*="arrow-right-solid.svg"]) { filter: invert(1) hue-rotate(180deg) brightness(1.3); }