/* ================================================================ MODUL: Design system ISU — valorile de bază (tokeni) FACE: Definește O SINGURĂ DATĂ culorile, fonturile, mărimile de text, distanțele, rotunjirile, umbrele și straturile (z-index) ale platformei, ca variabile CSS (--isu-...). Restul CSS-ului platformei are voie să folosească DOAR aceste variabile, nu culori scrise direct. UNDE: se încarcă pe tot site-ul (design/design.php). Conține DOAR variabile, deci nu schimbă singur aspectul niciunei pagini. SURSA: navigația platformei (isu-core/navigare.php + isu-core/css/navigare.css), care folosește paleta Tailwind: gri + albastru. Valorile de mai jos sunt EXACT cele din navigație, ca trecerea să nu schimbe nimic vizual. [Agent_0fa1 2026-10-01] ================================================================ */ :root { /* ---------- CULOAREA PRINCIPALĂ (albastru) ---------- navigație: bg-blue-500 (accent), bg-blue-50 (fundal activ), #dbeafe (hover) */ --isu-principal-50: #eff6ff; --isu-principal-100: #dbeafe; --isu-principal-200: #bfdbfe; --isu-principal-500: #3b82f6; /* culoarea de bază */ --isu-principal-600: #2563eb; /* hover pe butoane */ --isu-principal-700: #1d4ed8; /* apăsat / text pe fundal deschis */ --isu-principal-800: #1e40af; /* text pe fundal albastru (toast) */ --isu-principal: var(--isu-principal-500); --isu-principal-hover: var(--isu-principal-600); --isu-principal-fundal: var(--isu-principal-50); /* ---------- GRIURI (neutre) — textul, marginile, fundalurile ---------- navigație: text-gray-700 (cel mai folosit), bg-gray-100, border-gray-200 */ --isu-gri-50: #f9fafb; --isu-gri-100: #f3f4f6; --isu-gri-200: #e5e7eb; --isu-gri-300: #d1d5db; --isu-gri-400: #9ca3af; --isu-gri-500: #6b7280; --isu-gri-600: #4b5563; --isu-gri-700: #374151; --isu-gri-800: #1f2937; --isu-gri-900: #111827; --isu-alb: #ffffff; /* Roluri — pe acestea le folosește codul, nu numerele de mai sus */ --isu-text: var(--isu-gri-900); /* titluri, valori importante */ --isu-text-normal: var(--isu-gri-700); /* textul obișnuit */ --isu-text-slab: var(--isu-gri-500); /* explicații, etichete */ --isu-text-stins: var(--isu-gri-400); /* dezactivat, placeholder */ --isu-fundal: var(--isu-alb); /* carduri, sidebar */ --isu-fundal-pagina: var(--isu-gri-50); /* spatele paginii */ --isu-fundal-hover: var(--isu-gri-100); /* rând / link la hover */ --isu-margine: var(--isu-gri-200); /* marginea obișnuită */ --isu-margine-tare: var(--isu-gri-300); /* câmpuri de formular */ /* ---------- STĂRI ---------- verde: din selectorul de firmă (#f0fdf4, #dcfce7); roșu: bg-red-500/600 din navigație */ --isu-succes: #16a34a; --isu-succes-fundal: #f0fdf4; --isu-succes-margine: #bbf7d0; --isu-avertizare: #d97706; --isu-avertizare-fundal: #fffbeb; --isu-avertizare-margine: #fde68a; --isu-eroare: #dc2626; --isu-eroare-hover: #b91c1c; --isu-eroare-fundal: #fef2f2; --isu-eroare-margine: #fecaca; /* nuanțele exacte folosite de notificările scurte (toast) */ --isu-succes-100: #dcfce7; --isu-succes-500: #22c55e; --isu-succes-800: #166534; --isu-eroare-100: #fee2e2; --isu-eroare-500: #ef4444; --isu-eroare-800: #991b1b; --isu-info: var(--isu-principal-600); /* [Agent_0fa1 2026-10-03] nuanțe folosite de importul de angajați (negru/verde), acum în paleta comună */ --isu-succes-700: #15803d; /* verde pentru text alb (contrast ~5:1) */ --isu-avertizare-500: #f59e0b; --isu-avertizare-text: #92400e; /* text maro pe fundal galben */ --isu-negru: #0f0f0f; --isu-negru-moale: #1a1a1a; --isu-negru-card: #1e1e1e; --isu-negru-hover: #2a2a2a; --isu-violet-500: #8b5cf6; --isu-cyan-500: #06b6d4; --isu-info-fundal: var(--isu-principal-50); --isu-info-margine: var(--isu-principal-200); /* ---------- ACCENTE (DE DECIS de operator) ---------- indicatorul linkului activ din sidebar și butonul firmei */ --isu-accent-gradient: linear-gradient(to right, #3b82f6, #8b5cf6, #ec4899); --isu-accent-firma: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* ---------- CULORILE SERVICIILOR (pătrățelele din mini-sidebar) ---------- */ --isu-serviciu-ssm: #3b82f6; --isu-serviciu-ssm-hover: #2563eb; --isu-serviciu-su: #ef4444; --isu-serviciu-su-hover: #dc2626; --isu-serviciu-hr: #a855f7; --isu-serviciu-hr-hover: #9333ea; --isu-serviciu-unelte: #000000; --isu-serviciu-unelte-hover: #1f2937; --isu-serviciu-implicit: #6b7280; --isu-serviciu-implicit-hover: #4b5563; /* Fundalurile serviciilor (etichete, rânduri SSM / SU) și culoarea „suplimentar" (instructaje suplimentare) */ --isu-serviciu-ssm-fundal: var(--isu-principal-50); --isu-serviciu-ssm-text: var(--isu-principal-700); --isu-serviciu-su-fundal: var(--isu-eroare-fundal); --isu-serviciu-su-text: var(--isu-eroare-800); --isu-suplimentar: #9333ea; --isu-suplimentar-fundal: #f3e8ff; --isu-suplimentar-text: #6b21a8; /* ---------- NAVIGAȚIE (valori folosite doar de design/navigatie.css) ---------- */ --isu-nav-hover-fundal: #f0f5ff; /* sidebar-ul temporar (la hover pe mini-sidebar) */ --isu-nav-hover-link: #dbeafe; /* link la hover în sidebar-ul temporar */ --isu-text-pericol: var(--isu-eroare-500); /* „Deconectare" */ --isu-nav-linie-grup: #e8eaef; /* linia de sub titlurile de grup din sidebar */ --isu-nav-linie-subsol: rgba(75, 85, 99, 0.2); /* linia de deasupra subsolului sidebar-ului */ --isu-firma-fundal: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%); --isu-firma-negru: #141414; --isu-firma-negru-hover: #2d2d2d; --isu-firma-verde: var(--isu-succes-500); --isu-firma-optiune-hover: #f0fdf4; --isu-firma-optiune-activa: var(--isu-succes-100); /* ---------- TEXT ---------- Fontul platformei de azi este Roboto: îl pune Elementor pe toată pagina (setările globale „kit", post-7.css: font-family "Roboto", 16px, rând de 24px). */ --isu-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --isu-rand-baza: 24px; /* înălțimea rândului pe care o moștenește tot textul */ --isu-font-cod: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --isu-text-xs: 12px; /* text-xs — etichete mici, badge-uri */ --isu-text-sm: 14px; /* text-sm — textul de interfață (cel mai folosit în navigație) */ --isu-text-base: 16px; /* paragrafe */ --isu-text-lg: 18px; --isu-text-xl: 20px; /* titlu de card / secțiune */ --isu-text-2xl: 24px; /* titlu de pagină */ --isu-text-3xl: 30px; --isu-greutate-normal: 400; --isu-greutate-mediu: 500; /* font-medium — linkurile de navigație */ --isu-greutate-semi: 600; --isu-greutate-bold: 700; /* ---------- DISTANȚE ---------- */ --isu-spatiu-1: 4px; --isu-spatiu-2: 8px; --isu-spatiu-3: 12px; --isu-spatiu-4: 16px; --isu-spatiu-5: 24px; --isu-spatiu-6: 32px; --isu-spatiu-7: 48px; /* ---------- RAMA PAGINII (scheletul comun) ---------- Toate paginile cu meniu au aceeași lățime maximă a conținutului și aceleași margini; titlul paginii stă exact deasupra conținutului. [Agent_0fa1 2026-10-03] */ --isu-latime-continut: 1400px; /* lățimea maximă a conținutului */ --isu-margine-pagina: var(--isu-spatiu-5); /* marginea stânga/dreapta a paginii (24px) */ /* ---------- ROTUNJIRI ---------- */ --isu-rotund-sm: 6px; /* rounded-md — elemente mici */ --isu-rotund: 8px; /* rounded-lg — STANDARDUL navigației: butoane, câmpuri */ --isu-rotund-lg: 12px; /* carduri, ferestre */ --isu-rotund-full: 9999px; /* rounded-full — badge-uri, avatare */ /* ---------- UMBRE ---------- */ --isu-umbra-sm: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); /* butonul firmei */ --isu-umbra: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); --isu-umbra-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); /* shadow-lg — meniuri derulante */ --isu-umbra-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);/* shadow-xl — ferestre modale */ /* ---------- MIȘCARE (din tranzițiile sidebar-ului) ---------- */ --isu-tranzitie: .3s cubic-bezier(.4, 0, .2, 1); --isu-tranzitie-rapida: .15s ease-in-out; /* ---------- STRATURI (z-index, din navigare.css secțiunea 1) ---------- */ --isu-z-topbar: 4; --isu-z-sidebar: 5; --isu-z-mini-sidebar: 6; --isu-z-meniu-profil: 99999; --isu-z-tooltip: 9995; --isu-z-toast: 9996; --isu-z-dropdown: 9997; --isu-z-overlay: 9998; --isu-z-modal: 9999; }