/* tokens.css — SSER Young * Sursa unică de adevăr pentru culoare, tipografie, spacing, umbre (CLAUDE.md §3, §8). * Niciun hex hardcodat în componente (checklist §19). * * De unde vin culorile (15.10.2026 — nu din memorie, §17): * - roșul, cerneala, rozul, gri-rozul, grafitul: paleta SSER Young (Color Palette SSERY.pdf, Coolors, * culorile citite din fișier: #EA2F30 #231F20 #F1E4E8 #E2DCDE #2D2D2F; bronzul #9F7833 lăsat deoparte); * - hârtia: fundalul afișelor (fundal 5000x2500.png, mediana pixelilor #EEEDE9), ridicată 40% spre alb — * „mai fresh, mai clean" (Niki, 15.10); * - noaptea și lampa: k-means pe fotografiile de la practică (IMG_9709: #050401 44%, #160E07 23%, * lumina lămpii #F5D9B5; IMG_9710: #050602, #201B12). * * Fonturile: Hubot Sans și Mona Sans (OFL 1.1), subțiate și redenumite de unelte/fonturi_subtiere.py * („Hubot" și „Mona" sunt nume rezervate în licență — o versiune modificată nu le poate purta). */ @font-face { font-family: 'SSERY Display'; font-style: normal; font-weight: 700 900; font-stretch: 75% 125%; font-display: swap; src: url('assets/fonts/SSERYDisplay-var.woff2') format('woff2-variations'), url('assets/fonts/SSERYDisplay-var.woff2') format('woff2'); } @font-face { font-family: 'SSERY Text'; font-style: normal; font-weight: 350 700; font-display: swap; src: url('assets/fonts/SSERYText-var.woff2') format('woff2-variations'), url('assets/fonts/SSERYText-var.woff2') format('woff2'); } :root { /* --- Hârtia ---------------------------------------------------------------------- */ --c-hartie: #F5F4F2; /* fundalul: hârtia afișelor, mai albă */ --c-hartie-2: #EEEDE9; /* secțiune adâncită: hârtia afișelor, exact */ --c-roz: #F1E4E8; /* suprafața care urcă la hover, selecția */ --c-gri-roz: #E2DCDE; /* liniile fine, chenarele */ --c-alb: #FFFFFF; /* câmpurile formularelor */ --c-cerneala: #231F20; /* textul — 14,8:1 pe hârtie, 13,2:1 pe roz */ --c-cerneala-2: #635C5E; /* text secundar — 5,9:1 pe hârtie, 5,6:1 pe hârtia adâncită, 5,3:1 pe roz */ --c-linie: rgb(35 31 32 / .12); --c-linie-tare: rgb(35 31 32 / .32); /* --- Roșul -------------------------------------------------------------------------- PERECHI RISCANTE: --c-rosu pe hârtie are 3,86:1 (3,62 pe hârtia adâncită, 3,44 pe roz) — DOAR text ≥ 24 px, linii, suprafețe. Text roșu mic → --c-rosu-actiune (5,5:1 hârtie · 5,2 adâncită · 4,9 roz). */ --c-rosu: #EA2F30; /* roșul logo-ului */ --c-rosu-actiune: #C02021; /* butoanele (alb pe el 6,05:1) și textul roșu mic */ --c-rosu-voal: rgb(234 47 48 / .10); /* --- Blocurile închise -------------------------------------------------------------- */ --c-grafit: #2D2D2F; /* finalul, subsolul */ --c-noapte: #0D0A08; /* scena lămpii */ --c-lumina: #F5F4F2; /* text pe grafit (12,5:1) și pe noapte (18,0:1) */ --c-lumina-2: #B9B2B4; /* text secundar pe grafit (6,6:1) și pe noapte (9,5:1) */ --c-lampa: #F5D9B5; /* lumina lămpii — text pe noapte 14,5:1 */ --c-rosu-noapte: #FF5A50; /* roșul pe noapte 6,4:1; pe grafit 4,47:1 → DOAR text ≥ 24 px pe grafit */ --c-linie-noapte: rgb(245 244 242 / .16); --c-lumina-stinsa: rgb(245 244 242 / .22); /* --- Sticlă (antetul, bara fixă de pe telefon) -------------------------------------- iPhone: fără backdrop-filter pe antet (meniul derulat se taie) — sticla e doar culoare translucidă. */ --c-hartie-sticla: rgb(245 244 242 / .88); --c-grafit-sticla: rgb(45 45 47 / .9); --c-noapte-voal: rgb(13 10 8 / .55); /* --- Firele (panglicile din afișe) -------------------------------------------------- */ --fir-gri: rgb(35 31 32 / .22); --fir-rosu: rgb(234 47 48 / .34); --fir-gri-noapte: rgb(245 244 242 / .16); --fir-rosu-noapte: rgb(255 90 80 / .42); /* --- Tipografia --------------------------------------------------------------------- */ --font-display: 'SSERY Display', 'Arial Black', system-ui, sans-serif; --font-text: 'SSERY Text', system-ui, -apple-system, 'Segoe UI', sans-serif; --lat: 125%; /* lățimea titlurilor, la repaus */ --ingust: 75%; /* lățimea din care pornesc și în care se strâng */ /* scara de text (≥ 17 px pentru corp — un student și un părinte pe telefon) */ --t-eticheta: 0.875rem; /* 14 px, majuscule, tracking larg */ --t-mic: 0.9375rem; /* 15 px — note, legende */ --t-corp: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); /* 17 → 19 px */ --t-mare: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); /* 20 → 24 px — paragraf de deschidere */ --t-h3: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); --t-h2: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); --t-h1: clamp(2.75rem, 1.2rem + 6.6vw, 8rem); /* treptele editoriale (§6) — câte una pe ecran */ --t-uriasa: clamp(3.25rem, 1rem + 10vw, 11rem); --t-gigant: clamp(4.5rem, 1rem + 17vw, 19rem); --lh-corp: 1.6; --lh-titlu: .92; --tracking-eticheta: .14em; /* --- Spațiu ------------------------------------------------------------------------- */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem; --s-10: 10rem; --gutter: clamp(1rem, .5rem + 2.4vw, 3rem); --sectiune: clamp(5rem, 3rem + 9vw, 12rem); --latime: 90rem; --latime-text: 40rem; /* --- Forme ------------------------------------------------------------------------ */ --r-mic: .5rem; --r-mare: clamp(1.125rem, .6rem + 1.6vw, 2rem); /* ramele fotografiilor — ca rama portretului din afișe */ --r-pastila: 999px; /* --- Umbre: o singură sursă de lumină, de sus, ușor din stânga (lampa din IMG_9709 / 9710); colorate — cerneala încălzită spre roșu, nu negru la 20% (§8) -------------------------------- */ --umbra-mica: 0 1px 2px rgb(74 22 24 / .08), 0 4px 12px rgb(74 22 24 / .06); --umbra: 0 2px 6px rgb(74 22 24 / .08), 0 18px 40px -12px rgb(74 22 24 / .22); --umbra-mare: 0 4px 12px rgb(74 22 24 / .08), 0 40px 80px -24px rgb(74 22 24 / .32); --umbra-decupaj: drop-shadow(0 30px 40px rgb(74 22 24 / .28)); /* aceeași umbră, pentru decupajele cu alfa */ /* --- Mișcarea (§21: „young & refreshed" — fluidă, elastică, nu lentă) ----------------- */ --e-iesire: cubic-bezier(.16, 1, .3, 1); /* expo.out — pentru intrări, NU pe progresul de scroll */ --e-arc: cubic-bezier(.65, 0, .35, 1); --d-scurt: .35s; --d-mediu: .7s; --d-lung: 1.1s; }