/* ========================================================================== A.L.E. — Alianța Lucrătorilor din Energie tokens.css — DESIGN TOKENS (sursa unică de adevăr) -------------------------------------------------------------------------- Rol: definește TOATE valorile vizuale (culori, tipografie, spațiere, raze, umbre, durate) sub formă de variabile CSS. Niciun alt fișier CSS nu conține valori hex/px „la liber” — toate se referă la aceste variabile. Ordine: tokens.css → base.css → layout.css → components.css → pages.css → print.css (vezi src/partials/head.html) Editare: schimbarea unei culori de brand se face NUMAI aici. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. CULORI DE BRAND (obligatoriu păstrate) Sursa: Anexa 4 la Statut — Identitatea vizuală (blazon: câmp AZUR, roată dințată și balanță de ARGINT, fulger de AUR care devine flacără) + din site-ul actual. ATENȚIE: valorile marcate [CONFIRMĂ] trebuie verificate cu fișierul sursă oficial al stemei (planșa Anexei 4) înainte de lansare. --------------------------------------------------------------------- */ --ale-navy: #0b1220; /* fond instituțional — preluat din site-ul actual */ --ale-navy-800: #111a2e; /* navy ridicat (carduri pe fond navy) */ --ale-navy-700: #1a2540; /* borduri/separatoare pe navy */ --ale-azur: #1e3a8a; /* AZUR heraldic — câmpul scutului [CONFIRMĂ] */ --ale-azur-600: #2448b8; /* azur interactiv (hover, linkuri pe alb) */ --ale-azur-100: #e8edf9; /* azur foarte deschis (fundaluri de evidențiere) */ --ale-aur: #d4a017; /* AUR heraldic — fulgerul [CONFIRMĂ] */ --ale-aur-300: #f2c94c; /* aur luminos (pe fond navy) */ --ale-flacara: #e8722a; /* flacăra — accent foarte rar (max 1 element/pagină) */ --ale-argint: #c9d1dc; /* ARGINT heraldic — roata, balanța, eșarfa */ --ale-argint-100: #f3f5f8; /* argint aproape alb — fundal pagini de conținut */ /* --------------------------------------------------------------------- 2. CULORI DE CONTRAST MAXIM (paleta „web-safe”, 216 culori) Cerință: unde brandul nu oferă contrast suficient, se folosesc exclusiv culori web-safe cu contrast maxim. Perechile de mai jos depășesc WCAG 2.2 AAA (≥ 7:1) pentru text normal. --------------------------------------------------------------------- */ --ws-white: #ffffff; /* pe navy: 18.6:1 */ --ws-black: #000000; /* pe alb: 21:1; pe aur #ffcc00: 14.9:1 */ --ws-yellow: #ffcc00; /* web-safe; inel de focus pe orice fond */ --ws-cyan: #00ccff; /* web-safe; linkuri pe navy: 11.1:1 */ --ws-red: #cc0000; /* web-safe; erori pe alb: 7.4:1 */ --ws-green: #006600; /* web-safe; succes pe alb: 8.5:1 */ /* --------------------------------------------------------------------- 3. ROLURI SEMANTICE (componentele folosesc DOAR aceste roluri) --------------------------------------------------------------------- */ --bg: var(--ale-argint-100); --bg-elevated: var(--ws-white); --bg-dark: var(--ale-navy); --bg-dark-elevated:var(--ale-navy-800); --fg: #0f172a; /* text principal pe deschis: 16.4:1 */ --fg-muted: #3b4657; /* text secundar pe deschis: 8.9:1 */ --fg-on-dark: var(--ws-white); --fg-on-dark-muted:var(--ale-argint); /* pe navy: 12.3:1 */ --link: var(--ale-azur-600); /* pe alb: 7.3:1 */ --link-on-dark: var(--ws-cyan); --accent: var(--ale-aur); --accent-on-dark: var(--ale-aur-300); --border: #d5dbe4; --border-strong: #8a94a3; --border-on-dark: var(--ale-navy-700); --focus: var(--ws-yellow); --danger: var(--ws-red); --success: var(--ws-green); /* --------------------------------------------------------------------- 4. TIPOGRAFIE Display: „Sora” (geometrică, tehnică — energie, inginerie) Text: „Public Sans” (proiectată pentru site-uri instituționale, foarte lizibilă la corp mic — texte juridice lungi) Fonturile se servesc LOCAL din /assets/fonts (nu din Google Fonts), pentru a evita transferul adreselor IP către terți (GDPR). Vezi base.css → @font-face. Fallback-urile sunt fonturi de sistem. Scara: raport 1.250 (major third), bază 17px pe desktop. --------------------------------------------------------------------- */ --font-display: "Sora", "Segoe UI", system-ui, sans-serif; --font-text: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace; --fs--1: 0.8rem; /* 13.6px — note, legende */ --fs-0: 1rem; /* 17px — corp de text */ --fs-1: 1.25rem; /* 21px — lead, h4 */ --fs-2: 1.563rem; /* 27px — h3 */ --fs-3: 1.953rem; /* 33px — h2 */ --fs-4: 2.441rem; /* 41px — h1 pagini */ --fs-5: 3.052rem; /* 52px — h1 landing */ --fs-6: 3.815rem; /* 65px — hero desktop */ --lh-tight: 1.15; --lh-text: 1.6; --measure: 68ch; /* lățime maximă a unui rând de text */ /* --------------------------------------------------------------------- 5. SPAȚIERE (scara de 4px) ȘI LAYOUT --------------------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --container: 78rem; /* 1248px — lățime maximă conținut */ --container-narrow:52rem; /* 832px — texte juridice/articole */ --header-h: 4.5rem; /* înălțime header sticky (desktop) */ --gutter: clamp(1rem, 4vw, 2.5rem); /* --------------------------------------------------------------------- 6. FORME, UMBRE, MIȘCARE Politica de raze: 3 valori, cu semnificație — nu o singură rază aplicată la tot. Umbrele sunt navy-tintate, nu gri neutru. --------------------------------------------------------------------- */ --r-sm: 3px; /* controale mici: badge, cod, input */ --r-md: 8px; /* carduri, butoane */ --r-lg: 16px; /* panouri mari, hero */ --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.08); --shadow-md: 0 6px 18px -6px rgba(11, 18, 32, 0.22); --shadow-lg: 0 24px 48px -16px rgba(11, 18, 32, 0.35); --t-fast: 120ms; --t-base: 220ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* Z-index — scara declarată, nu valori arbitrare */ --z-header: 100; --z-menu: 110; --z-cookie: 200; --z-skip: 300; } /* Preferință de mișcare redusă: anulăm animațiile la nivel de token */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; } }