/* ============================================================================ tokens.css — Happy Smile, cabinet stomatologic Sursa unică de adevăr pentru culoare, tipografie, spațiere, umbre. CLAUDE.md §3, §6, §8, §12, §19. REGULA: niciun hex, niciun px de font și nicio umbră nu se scriu direct în componente. Totul vine de aici. Dacă ai nevoie de o valoare care nu există, o adaugi aici întâi. Culorile NU sunt alese din memorie. Sunt măsurate prin k-means pe fotografiile reale din cabinet — vezi refs/paleta-extrasa-din-poze.md. Tipografia a trecut testul de diacritice din §13 — vezi refs/tipografie-test.md. ========================================================================= */ /* --------------------------------------------------------------------------- 1. FONTURI — self-hosted, cu font-display: swap (§12) Perechea A, „Rețeta". Young Serif pe display, Instrument Sans pe text. ------------------------------------------------------------------------ */ @font-face { font-family: 'Young Serif'; src: url('assets/fonts/YoungSerif-Regular.woff2') format('woff2'); font-weight: 400; /* Young Serif are O SINGURĂ grosime. Vezi §3 mai jos. */ font-style: normal; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('assets/fonts/InstrumentSans-var.woff2') format('woff2-variations'); font-weight: 400 700; /* variabil */ font-stretch: 75% 100%; font-style: normal; font-display: swap; } :root { /* --------------------------------------------------------------------------- 2. PALETA BRUTĂ — nouă tonuri, măsurate în casă Numele vin din obiectul real, ca să nu uităm de unde sunt. Toate stau între H 20° și H 38°: o singură familie de nuanțe. Axa paletei este SATURAȚIA, nu nuanța (vezi analiza din /refs). ------------------------------------------------------------------------ */ --c-tavan: #E6E6D9; /* H 60 S 21 L 88 — lumina de zi pe tavan. Cel mai deschis, ușor rece. E singura răcoare din toată casa. Se folosește ca SUPRAFAȚĂ, niciodată ca accent — nu e o culoare de brand. */ --c-hartie: #E8E5D2; /* H 52 S 32 L 87 — abajurul lămpii. Fundalul implicit al paginii. */ --c-greige: #CBC9C3; /* H 45 S 7 L 78 — peretele cabinetului în lumină. Suprafață calmă. */ --c-piatra: #B6AFA3; /* H 38 S 12 L 68 — greige mai închis. Borduri, separatoare. */ --c-parchet: #C6B497; /* H 37 S 29 L 68 — parchetul în plin soare. */ --c-lut: #A4917C; /* H 32 S 18 L 56 — neutru cald mediu. Text dezactivat, iconuri. */ --c-nuc: #8A6B4C; /* H 30 S 29 L 42 — lemnul de nuc. ATENȚIE: contrast doar 3.86:1 pe fundal deschis → NUMAI text mare (≥24px) sau decor. */ --c-scoarta: #7B522D; /* H 29 S 46 L 33 — ocrul peretelui. Accentul principal. 5.37:1 pe hârtie → trece pentru text de orice mărime. */ --c-alama: #C58436; /* H 33 S 57 L 50 — alama lampadarului. ATENȚIE: 2.46:1 pe fundal deschis → NU se folosește ca text pe deschis. Doar pe fundal închis (5.56:1 pe umbră) sau ca umplere/linie. */ --c-tutun: #5B3412; /* H 28 S 67 L 21 — ocrul saturat în umbră. Butoane, suprafețe închise. */ --c-umbra: #2A150A; /* H 21 S 62 L 10 — umbrele adânci. Textul principal. Baza umbrelor. */ /* --------------------------------------------------------------------------- 3. ROLURI SEMANTICE — astea se folosesc în componente, nu cele de mai sus ------------------------------------------------------------------------ */ --bg-page: var(--c-hartie); --bg-surface: var(--c-tavan); /* carduri, panouri ridicate */ --bg-sunken: var(--c-greige); /* zone „adâncite", fundal de secțiune */ --bg-inverse: var(--c-umbra); /* secțiunea semnăturilor, footer */ --bg-accent: var(--c-tutun); /* butonul principal */ --text-primary: var(--c-umbra); /* 13.69:1 pe hârtie */ --text-secondary: var(--c-tutun); /* 8.52:1 */ --text-tertiary: var(--c-scoarta); /* 5.37:1 — etichete, eyebrow */ --text-muted: var(--c-lut); /* DOAR decorativ, nu informație */ --text-on-dark: var(--c-hartie); /* 13.69:1 pe umbră */ --text-on-accent: var(--c-hartie); /* 8.52:1 pe tutun */ --border-hair: color-mix(in srgb, var(--c-nuc) 26%, transparent); --border-strong: var(--c-piatra); /* --------------------------------------------------------------------------- 4. TIPOGRAFIE Young Serif are o singură grosime — deci ierarhia se face din CORP și SPAȚIU, nu din weight. Instrument Sans (400–700) duce toată ierarhia secundară. Corpul minim de text e 17px (§6), pentru un pacient de 60 de ani pe telefon. ------------------------------------------------------------------------ */ --font-display: 'Young Serif', Georgia, 'Times New Roman', serif; --font-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Scară fluidă între 360px și 1440px. Fără salturi bruște la resize. */ --step--1: clamp(0.875rem, 0.84rem + 0.15vw, 0.938rem); /* 14 → 15 note, legende */ --step-0: clamp(1.063rem, 1.02rem + 0.20vw, 1.125rem); /* 17 → 18 TEXT DE BAZĂ */ --step-1: clamp(1.25rem, 1.18rem + 0.32vw, 1.375rem); /* 20 → 22 intro, lead */ --step-2: clamp(1.5rem, 1.38rem + 0.55vw, 1.75rem); /* 24 → 28 subtitlu */ --step-3: clamp(1.875rem, 1.66rem + 0.95vw, 2.375rem); /* 30 → 38 titlu secțiune */ --step-4: clamp(2.375rem, 2.02rem + 1.58vw, 3.25rem); /* 38 → 52 titlu mare */ --step-5: clamp(3rem, 2.36rem + 2.84vw, 4.5rem); /* 48 → 72 hero */ --step-6: clamp(3.75rem, 2.66rem + 4.84vw, 6.5rem); /* 60 → 104 momentul semnăturii */ --lh-tight: 1.08; /* display mare */ --lh-display: 1.16; /* display mediu */ --lh-snug: 1.38; /* subtitluri, lead */ --lh-body: 1.68; /* text curent — generos, conform §6 */ --ls-display: -0.012em; /* Young Serif e lat; la corp mare se strânge puțin */ --ls-body: 0; --ls-label: 0.22em; /* eyebrow-uri, etichete, majuscule */ --measure: 62ch; /* lungimea maximă de rând pentru text curent */ /* --------------------------------------------------------------------------- 5. SPAȚIERE — bază 4px ------------------------------------------------------------------------ */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ --sp-24: 6rem; /* 96 */ --sp-32: 8rem; /* 128 */ --sp-40: 10rem; /* 160 — respirația dintre secțiuni mari */ /* --------------------------------------------------------------------------- 6. RAZE — deliberat MICI și NEUNIFORME „Colțuri rotunjite la fel peste tot" e explicit pe lista de „ce nu vreau". Raza aici e un detaliu de tâmplărie, nu un stil. Mobila din cabinet are muchii aproape drepte — o urmăm. ------------------------------------------------------------------------ */ --r-sharp: 0; /* linii, separatoare, benzi de lumină */ --r-xs: 2px; /* butoane, câmpuri, majoritatea suprafețelor */ --r-sm: 3px; /* imagini */ --r-pill: 999px; /* DOAR badge-uri mici, maximum două pe pagină */ /* --------------------------------------------------------------------------- 7. LUMINĂ ȘI UMBRE (§8) O SINGURĂ sursă de lumină, măsurată în fotografii: soare jos, din DREAPTA-SUS, prin ferestre cu cercevele. Deci toate umbrele cad în JOS și la STÂNGA. Umbrele NU sunt negre — sunt construite din --c-umbra, care e maro cald. Dacă vreo umbră din site cade în altă parte, e o greșeală, nu o variație. ------------------------------------------------------------------------ */ --shadow-color: 42 21 10; /* --c-umbra în componente RGB, pentru opacitate */ --shadow-xs: -1px 2px 4px rgb(var(--shadow-color) / 0.08); --shadow-sm: -2px 4px 10px rgb(var(--shadow-color) / 0.10), -1px 1px 3px rgb(var(--shadow-color) / 0.06); --shadow-md: -6px 12px 26px rgb(var(--shadow-color) / 0.13), -2px 3px 7px rgb(var(--shadow-color) / 0.08); --shadow-lg: -14px 24px 50px rgb(var(--shadow-color) / 0.17), -4px 6px 14px rgb(var(--shadow-color) / 0.10); --shadow-xl: -26px 40px 88px rgb(var(--shadow-color) / 0.22), -8px 12px 26px rgb(var(--shadow-color) / 0.12); /* Banda de lumină ascunsă sub blatul de nuc — e un detaliu real al cabinetului și devine motivul nostru de „lumină caldă care scaldă o suprafață". */ --glow-banda: 0 6px 24px -4px rgb(197 132 54 / 0.45); /* Gradientul de lumină al camerei: cald sus-dreapta, adânc jos-stânga. */ --grad-camera: radial-gradient(120% 90% at 78% 8%, #7A4A1E 0%, #4A2510 38%, var(--c-umbra) 74%); /* --------------------------------------------------------------------------- 8. TEXTURĂ (§8, punctul 3) Grain fin peste suprafețe mari. Scoate pagina din senzația de „plat digital". Se aplică prin ::after cu mix-blend-mode: overlay și opacitate mică. ------------------------------------------------------------------------ */ --grain: url("data:image/svg+xml;utf8,"); --grain-opacity: 0.14; /* --------------------------------------------------------------------------- 9. MIȘCARE (§7) Animații doar pe transform și opacity. Nimic pe layout. ------------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 640ms; --dur-reveal: 900ms; /* reveal la scroll, cu stagger */ /* --------------------------------------------------------------------------- 10. LAYOUT ------------------------------------------------------------------------ */ --container: 1200px; --container-text: 680px; /* coloană de text curent */ --gutter: clamp(1.25rem, 4vw, 3.5rem); --header-h: 72px; --mobile-bar-h: 64px; /* bara sticky cu telefon + programare (§9) */ /* --------------------------------------------------------------------------- 12. SCARA EDITORIALĂ — adăugată la sesiunea de finisare (28.09) Referințele lui Niki (#5, #7) își iau „aerul premium" din contrastul de scară: titluri foarte mari lângă text mic și mult gol. Treptele 1–6 rămân pentru text; astea două sunt doar pentru momente de display, câte unul pe ecran. ------------------------------------------------------------------------ */ --step-7: clamp(3.4rem, 1.6rem + 7.6vw, 9.5rem); /* 54 → 152 deschiderea */ --step-8: clamp(4.5rem, 1rem + 15vw, 17rem); /* 72 → 272 text de fundal, decorativ */ --lh-gigant: 0.96; --ls-gigant: -0.028em; /* Voalul peste fotografie: din --c-umbra, ca umbrele. Umbra vine din STÂNGA (acolo stă textul, contrastul se calculează pe el) și de jos, iar dreapta rămâne liberă, unde cade fotoliul în lumina ferestrei — adică exact direcția luminii din §7 a tokenilor: soarele intră din dreapta. */ --voal: linear-gradient(to bottom, rgb(var(--shadow-color) / 0.55) 0%, rgb(var(--shadow-color) / 0) 20%), linear-gradient(to top, rgb(var(--shadow-color) / 0.85) 0%, rgb(var(--shadow-color) / 0) 48%), linear-gradient(to right, rgb(var(--shadow-color) / 0.90) 0%, rgb(var(--shadow-color) / 0.80) 36%, rgb(var(--shadow-color) / 0.50) 68%, rgb(var(--shadow-color) / 0.10) 100%); --voal-ingust: linear-gradient(to top, rgb(var(--shadow-color) / 0.95) 0%, rgb(var(--shadow-color) / 0.86) 45%, rgb(var(--shadow-color) / 0.5) 78%, rgb(var(--shadow-color) / 0.62) 100%); /* Valorile de mai sus sunt MĂSURATE pe fotografie, nu estimate: contrastul textului crem pe pixelii reali de sub el, percentila 1. Desktop: titlul 3.47:1 (text mare, prag 3), textul mic ≥ 6.9:1. Telefon: ≥ 7:1 peste tot. Dacă se schimbă fotografia din deschidere, se refac măsurătorile. */ --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1); /* ieșire lungă, fără ricoșeu */ } /* --------------------------------------------------------------------------- 11. PREFERS-REDUCED-MOTION — obligatoriu (§7, §19) ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================ PERECHI DE CULORI VERIFICATE — contrast WCAG, măsurat, nu estimat (§12) Minimul e 4.5:1 pentru text normal, 3:1 pentru text mare (≥24px). PE FUNDAL DESCHIS (--c-hartie / --c-tavan): --c-umbra 13.69:1 ✓ orice mărime --c-tutun 8.52:1 ✓ orice mărime --c-scoarta 5.37:1 ✓ orice mărime --c-nuc 3.86:1 ⚠ NUMAI text mare (≥24px) --c-alama 2.46:1 ✗ NU ca text. Doar umplere, linie, iconografie decorativă. PE --c-greige: --c-umbra 10.48:1 ✓ --c-tutun 6.52:1 ✓ --c-scoarta 4.11:1 ⚠ doar text mare PE --c-tutun (butonul principal): --c-hartie 8.52:1 ✓ --c-greige 6.52:1 ✓ PE --c-umbra (secțiunea semnăturilor, footer): --c-hartie 13.69:1 ✓ --c-greige 10.48:1 ✓ --c-piatra 7.97:1 ✓ --c-alama 5.56:1 ✓ ← aici alama devine utilizabilă ca text ========================================================================= */