/* tokens.css — sistem de design Expert Architect Importa acest fisier primul in orice pagina */ :root { /* ── Paleta brand ── */ --navy: #0E1726; /* fundal principal */ --ink: #15202E; /* fundal carduri, sectiuni alternate */ --ink-light: #1E2D3D; /* hover pe carduri dark */ --gold: #E3B341; /* accent principal, CTA, highlight */ --gold-dim: #B07A1E; /* gold hover / pressed */ --gold-pale: #E3B34120; /* gold transparent pentru borders subtile */ --cream: #F4EFE3; /* text pe dark, fundal elemente light */ --cream-dim: #D4CABC; /* text secundar pe dark */ /* ── Nuanțe „de suprafață" (se inversează pe teme) ── --tint-rgb = culoarea overlay-urilor subtile (borduri, hover, text estompat). Pe dark e alb; pe light devine navy, ca să rămână vizibile pe crem. --surface-rgb = culoarea de bază a barelor translucide (nav sticky, tab bar). Pe dark e navy; pe light devine crem. */ --tint-rgb: 255, 255, 255; --surface-rgb: 14, 23, 38; --hero-glow-2: rgba(30, 60, 100, 0.28); /* al doilea glow din hero (albăstrui pe dark) */ /* ── Text ── */ --text-primary: #F4EFE3; /* pe fundal dark */ --text-muted: #8A9BB0; /* subtitluri, meta, placeholdere */ --text-inverse: #0E1726; /* pe fundal light (ex: buton gold cu text dark) */ /* ── Feedback ── */ --success: #22C55E; --success-bg: #16A34A20; --warning: #F59E0B; --warning-bg: #D9770620; --danger: #EF4444; --danger-bg: #DC262620; --info: #60A5FA; /* ── Tipografie ── */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Figtree', sans-serif; /* ── Marimi fonturi ── */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* ── Spatiere ── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ── Raze colturi ── */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px; /* ── Umbre ── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --shadow-gold: 0 0 24px rgba(227, 179, 65, 0.25); /* ── Tranzitii ── */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ── Layout ── */ --container-max: 1200px; --container-pad: clamp(1rem, 5vw, 3rem); --header-h: 72px; /* Tema implicită: dark */ color-scheme: dark; } /* ══════════════════════════════════════════════════════ TEMA LIGHT — inspirată din varianta deschisă a logo-ului (fundal crem, „EA" navy, accente aurii). Se activează cu . Refolosește exact aceiași tokeni; doar remapăm culorile, așa că toate paginile devin light automat. ══════════════════════════════════════════════════════ */ :root[data-theme="light"] { color-scheme: light; /* ── Suprafețe (crem, ca fundalul logo-ului light) ── */ --navy: #F2ECE0; /* fundal principal — crem deschis (ridicat ca elementele să iasă în relief) */ --ink: #F9F5EE; /* carduri / secțiuni alternate — o idee mai deschise decât fundalul */ --ink-light: #FDFBF6; /* inputuri, hover pe carduri — cel mai deschis */ /* ── Auriu (brandul rămâne, dar o nuanță mai adâncă ca să fie lizibil pe crem) ── */ --gold: #B47C17; /* accent + etichete + linkuri, lizibil pe crem */ --gold-dim: #8A5D0E; /* hover / linkuri de conținut */ --gold-pale: rgba(180, 124, 23, 0.16); /* ── Butoane CTA pe light: navy + text crem (= paleta logo-ului dark) ── Pe light auriul rămâne accent (etichete, numere), NU culoarea butonului. */ --cta-bg: #172542; --cta-bg-hover: #24344F; --cta-fg: #F4EFE3; /* Umbră subtilă pentru carduri (pe dark cardurile se definesc prin borduri, fără umbră) */ --card-shadow: 0 1px 2px rgba(23,37,66,0.05), 0 5px 16px rgba(23,37,66,0.07); /* ── „Cream" își schimbă rolul: pe light devine textul navy ── */ --cream: #172542; /* titluri, strong, text pe accent */ --cream-dim: #3B4762; /* text secundar / paragrafe */ /* ── Text ── */ --text-primary: #172542; --text-muted: #6A7386; /* meta, subtitluri pe crem */ --text-inverse: #172542; /* text închis pe buton auriu (rămâne închis) */ /* ── Nuanțe de suprafață inversate ── */ --tint-rgb: 23, 37, 66; /* overlay-urile devin navy subtil */ --surface-rgb: 236, 228, 212; /* barele translucide devin crem */ --hero-glow-2: rgba(180, 124, 23, 0.10); /* glow cald discret în loc de albastru */ /* ── Umbre mai blânde pe fundal deschis ── */ --shadow-sm: 0 1px 3px rgba(23,37,66,0.10); --shadow-md: 0 4px 16px rgba(23,37,66,0.12); --shadow-lg: 0 10px 34px rgba(23,37,66,0.16); --shadow-gold: 0 0 24px rgba(227,179,65,0.28); } /* ── Corecții punctuale pentru light ── „powered by" folosea mix-blend screen (bun pe negru, invizibil pe crem) */ :root[data-theme="light"] .powered-by__logo, :root[data-theme="light"] .lp-footer__powered-logo { mix-blend-mode: multiply; } /* Linkurile de conținut: auriu adânc pentru contrast pe crem (butoanele-link își păstrează propria culoare, au clasă proprie) */ :root[data-theme="light"] p a, :root[data-theme="light"] .lp-doc a, :root[data-theme="light"] .auth-footer a { color: var(--gold-dim); } /* Butoane CTA pe light: navy + text crem (auriul rămâne accent, nu buton) */ :root[data-theme="light"] .btn-primary, :root[data-theme="light"] .lp-btn--gold { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); box-shadow: 0 4px 16px rgba(23,37,66,0.18); } :root[data-theme="light"] .btn-primary:hover, :root[data-theme="light"] .lp-btn--gold:hover { background: var(--cta-bg-hover); border-color: var(--cta-bg-hover); color: var(--cta-fg); box-shadow: 0 8px 24px rgba(23,37,66,0.26); } /* Carduri pe light: umbră subtilă ca să se ridice din crem (doar cele care se bazau pe fundal/bordură fină; cele cu umbră proprie rămân) */ :root[data-theme="light"] .card, :root[data-theme="light"] .module-card, :root[data-theme="light"] .curriculum-item, :root[data-theme="light"] .mod-card, :root[data-theme="light"] .stat-card, :root[data-theme="light"] .quick-link-card, :root[data-theme="light"] .content-module, :root[data-theme="light"] .lp-problem-card, :root[data-theme="light"] .lp-deliverable-card, :root[data-theme="light"] .lp-module, :root[data-theme="light"] .lp-package, :root[data-theme="light"] .hp-mod, :root[data-theme="light"] .wbn-step { box-shadow: var(--card-shadow); } /* ══════════════════════════════════════════════════════ Animație lină la schimbarea temei — activată temporar de theme.js prin clasa .theme-anim pe , apoi scoasă. Nu lăsăm tranziția permanentă ca să nu îngreunăm hover-urile. ══════════════════════════════════════════════════════ */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color 350ms ease, border-color 350ms ease, color 350ms ease, box-shadow 350ms ease !important; } @media (prefers-reduced-motion: reduce) { html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: none !important; } }