/* ========================================================================== VARIABLES.CSS — sistem de design (token-uri) Direcție vizuală: „planșă de desen tehnic” — precizie, grile, repere de atelier, potrivită pentru un liceu tehnologic. Paleta este derivată din sigla liceului (negru + auriu) și completată cu accentul secundar verde mentă, folosit pentru etichete și detalii. ========================================================================== */ :root { /* ---- Paletă de culori — derivată din sigla liceului (auriu + negru) și completată cu accentul secundar cerut, verde mentă ---- */ --culoare-hartie: #FBF8EF; /* fundal principal, alb-hârtie cald */ --culoare-hartie-inchis: #F1EAD4; /* fundal secțiuni alternative, nuanță aurie discretă */ --culoare-cerneala: #1C1810; /* text principal, negru cald (din siglă) */ --culoare-cerneala-slaba: #55503F;/* text secundar */ --culoare-navy: #1C1810; /* fundal închis principal (header întunecat, footer) — negrul din siglă */ --culoare-navy-inchis: #000000; /* pentru hover/footer, negru pur */ --culoare-cupru: #E3A705; /* accent principal — auriul din siglă, folosit punctual */ --culoare-cupru-inchis: #B58600; /* accent hover, auriu închis */ --culoare-teal: #2FA98C; /* accent secundar — verde mentă, etichete/detalii */ --culoare-alerta: #B3261E; /* erori, sesizări */ --culoare-alb: #FFFFFF; --culoare-linie: #E4DCC0; /* linii/borduri subtile pe hârtie, nuanță aurie */ --culoare-linie-inchis: rgba(255,255,255,0.16); /* linii pe fundal închis */ --culoare-focus: #8A6400; /* culoare cu contrast bun pentru :focus-visible, indiferent de fundal */ /* ---- Contrast ridicat (temă alternativă de accesibilitate) ---- */ --hc-fundal: #000000; --hc-text: #FFFFFF; --hc-accent: #FFD34D; --hc-linie: #FFFFFF; /* ---- Tipografie ---- */ --font-titlu: "Space Grotesk", "Segoe UI", Arial, sans-serif; --font-corp: "Inter", "Segoe UI", Arial, sans-serif; --font-utilitar: "JetBrains Mono", "Courier New", monospace; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1.0625rem; --text-md: 1.25rem; --text-lg: 1.625rem; --text-xl: 2.25rem; --text-2xl: 3rem; --text-3xl: 4rem; /* ---- Spațiere (scală pe 8px) ---- */ --spatiu-1: 0.5rem; --spatiu-2: 0.75rem; --spatiu-3: 1rem; --spatiu-4: 1.5rem; --spatiu-5: 2rem; --spatiu-6: 3rem; --spatiu-7: 4rem; --spatiu-8: 6rem; /* ---- Layout ---- */ --latime-maxima: 1240px; --latime-text: 70ch; --raza-colt: 2px; /* colțuri aproape drepte — stil planșă tehnică */ --raza-colt-mare: 4px; /* ---- Umbre discrete ---- */ --umbra-card: 0 1px 2px rgba(30,36,48,0.06), 0 4px 16px rgba(30,36,48,0.06); --umbra-ridicata: 0 8px 30px rgba(20,40,64,0.16); /* ---- Tranziții ---- */ --tranzitie-rapida: 150ms ease; --tranzitie-medie: 260ms ease; /* ---- Dimensiune text (ajustabilă din panoul de accesibilitate) ---- */ --scala-font: 1; } /* Temă de contrast ridicat, comutată prin JS pe */ html[data-contrast="ridicat"] { --culoare-hartie: var(--hc-fundal); --culoare-hartie-inchis: var(--hc-fundal); --culoare-cerneala: var(--hc-text); --culoare-cerneala-slaba: var(--hc-text); --culoare-navy: var(--hc-fundal); --culoare-navy-inchis: #000000; --culoare-cupru: var(--hc-accent); --culoare-cupru-inchis: var(--hc-accent); --culoare-linie: var(--hc-linie); --culoare-linie-inchis: var(--hc-linie); --umbra-card: none; --umbra-ridicata: none; } html { font-size: calc(16px * var(--scala-font)); }