/* ============================================================ tokens.css — vocabularul vizual unic al site-ului. Nicio valoare de culoare / spacing / radius hardcodată nu are voie să existe în afara acestui fișier. Temă: negru profund + roșul stemei + galbenul marcajului rutier. ============================================================ */ :root { /* ---------- Culori: straturile de negru ---------- */ --ink-900: #08080A; /* fundalul paginii */ --ink-800: #0F0F12; /* secțiuni alternante */ --ink-700: #16161A; /* carduri */ --ink-600: #1F1F25; /* hover pe carduri, inputuri */ --border: #35353F; --border-soft: #26262E; /* ---------- Culori: roșul, accentul principal ---------- Numele variabilelor rămân cele din tema originală („flame"), ca restul fișierelor să nu trebuiască atinse. */ --flame: #C7111C; /* accent principal — CTA, badge-uri, benzi. Roșul coroanei din stemă. Adâncimea nu e estetică: pe el scriem cu alb, iar la #E11B26 albul cobora la 4.8:1, prea puțin pentru notele mici din benzile inversate. */ --flame-hot: #E8232F; /* hover */ --flame-deep: #8E0A12; /* active, umbre */ --flame-text: #FF5A63; /* text mic pe negru: 6.5:1, spre deosebire de --flame, care pe negru abia trece de 3:1 */ --flame-tint: rgba(199, 17, 28, 0.16); --flame-glow: rgba(199, 17, 28, 0.24); /* ---------- Culori: galbenul, accentul secundar ---------- Pe negru urcă la 11:1, deci duce textul mic pe care roșul nu-l poate duce: supratitluri, etichete mono, cifre. */ --gold: #FFC220; --gold-hot: #FFD34D; --gold-deep: #D89600; --gold-tint: rgba(255, 194, 32, 0.14); --ember: #FFD97A; /* galben deschis, sublinieri și gradiente */ /* ---------- Culori: text ---------- --text-hi e albul pur, rezervat titlurilor. Restul textului stă pe --text, ca albul să rămână un accent, nu norma. */ --text-hi: #FFFFFF; --text: #F4F4F6; --text-muted: #B4B4C0; --text-dim: #87879A; /* ---------- Culori: pe roșu ---------- Secțiunile inversate și butoanele pline scriu cu alb pe roșu. Pe banda galbenă, `.section--invert--gold` rescrie local acest grup în negru — vezi style.css, secțiunea 19. Nivelurile „soft" și „dim" sunt mai ridicate decât ar cere ochiul: pe roșu, orice alb sub ~0.86 cade sub 4.5:1. Ierarhia o duc dimensiunea și grosimea literei, nu transparența. */ --on-flame: #FFFFFF; --on-flame-soft: rgba(255, 255, 255, 0.92); --on-flame-dim: rgba(255, 255, 255, 0.86); --on-flame-line: rgba(255, 255, 255, 0.24); --on-flame-border: rgba(255, 255, 255, 0.40); /* ---------- Culori: funcționale ---------- */ --wa-green: #25D366; /* EXCLUSIV butoanele WhatsApp */ --wa-green-dk: #1EBE5A; --danger: #FF5A4E; --danger-tint: rgba(255, 90, 78, 0.12); --white: #FFFFFF; /* ---------- Tipografie ---------- */ --font-head: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* scală fluidă cu clamp(min, preferat, max) */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* ~12–13px */ --fs-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); /* ~14–15px */ --fs-base: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem); /* ~16–17px */ --fs-lg: clamp(1.125rem, 1.08rem + 0.3vw, 1.25rem); /* ~18–20px */ --fs-xl: clamp(1.375rem, 1.28rem + 0.5vw, 1.625rem); /* ~22–26px */ --fs-2xl: clamp(1.625rem, 1.45rem + 0.9vw, 2.125rem); /* ~26–34px */ --fs-3xl: clamp(2rem, 1.7rem + 1.5vw, 2.75rem); /* ~32–44px */ --fs-4xl: clamp(2.375rem, 1.85rem + 2.4vw, 3.75rem); /* ~38–60px */ --fs-5xl: clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem); /* ~44–88px */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.6; --lh-display: 0.95; /* titlurile grele, foarte strânse */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-extra: 800; --fw-black: 900; /* tracking negativ — grotescul greu trebuie strâns ca să pară premium */ --tracking-display: -0.035em; --tracking-title: -0.02em; --tracking-mono: 0.22em; /* eyebrow-uri, ticker */ /* ---------- Spacing (scală 4px) ---------- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ /* ---------- Layout ---------- */ --container-max: 1240px; --container-pad: clamp(1rem, 5vw, 2rem); --header-h: 68px; /* ---------- Radius ---------- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; /* ---------- Umbre & glow ---------- Pe negru, umbra nu se vede. Elevația se citește prin glow roșu și printr-un chenar de 1px care se aprinde. */ --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-md: 0 8px 24px rgba(0, 0, 0, 0.5); --sh-lg: 0 20px 48px rgba(0, 0, 0, 0.6); --glow: 0 0 0 1px var(--flame-tint), 0 8px 32px var(--flame-glow); --glow-soft: 0 0 24px var(--flame-tint); /* ---------- Tranziții ---------- */ --tr-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --tr-base: 220ms cubic-bezier(0.4, 0, 0.2, 1); --tr-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1); /* ---------- Mișcare (folosite de motion.css / sequence.css) ---------- */ --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* pop cu overshoot mic */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* reveal-uri */ --stagger: 60ms; /* pas între copiii unei grile la reveal */ --lift: -4px; /* ridicarea unui card la hover */ /* ---------- Profunzime 3D (depth.css) ---------- Perspectiva e mai scurtă pe telefon: ecranul e mic, deci unghiul trebuie să fie mai agresiv ca efectul să se vadă. */ --persp: 1200px; --persp-near: 900px; --tilt-max: 8deg; /* înclinarea maximă la atingere / mouse */ /* ---------- Z-index ---------- */ --z-behind: -1; --z-header: 100; --z-sticky: 200; --z-overlay: 900; --z-modal: 1000; /* focus ring — accesibilitate. Galben, nu roșu: pe negru urcă la 11:1 în loc de 4.4:1. Pe fundal roșu, secțiunile inversate îl rescriu cu alb (style.css §20). */ --focus-ring: 3px solid var(--gold); --focus-offset: 2px; }