/* ============================================================ BAZA — TOKENI SEMANTICI Nu contine nicio culoare literala. Totul pointeaza in tema. REGULA DE AUR: componentele folosesc DOAR tokenii de aici, niciodata --c-* direct si niciodata un hex. Ordinea de incarcare: themes/.css -> base/tokens.css ============================================================ */ :root { /* ---------- SUPRAFETE ---------- */ --bg: var(--c-neutral-0); --bg-subtle: var(--c-neutral-50); --bg-inset: var(--c-neutral-100); --surface: var(--c-neutral-0); --surface-hover: var(--c-neutral-50); --surface-raised:var(--c-neutral-0); --overlay: rgba(24, 36, 47, 0.55); /* ---------- TEXT ---------- */ --ink: var(--c-brand-900); --ink-strong: var(--c-brand-950); --ink-muted: var(--c-neutral-600); --ink-subtle: var(--c-neutral-500); --ink-inverse: var(--c-neutral-0); --ink-on-accent: var(--c-brand-900); /* cyanul e deschis: text INCHIS peste el */ /* ---------- CONTURURI ---------- */ --border: var(--c-neutral-200); --border-strong: var(--c-neutral-300); --border-accent: var(--c-accent-500); --divider: var(--c-neutral-100); /* ---------- ACTIUNE PRIMARA ---------- */ --primary: var(--c-brand-700); --primary-hover: var(--c-brand-800); --primary-active:var(--c-brand-900); --primary-ink: var(--c-neutral-0); --primary-quiet: var(--c-brand-50); /* ---------- ACCENT (cyan) ---------- accent = grafica, contururi, iconuri, glow. NU fundal pentru text alb. accent-text = singura varianta permisa pentru text/link pe fundal deschis. */ --accent: var(--c-accent-500); --accent-hover: var(--c-accent-600); --accent-text: var(--c-accent-700); --accent-quiet: var(--c-accent-50); --accent-line: var(--c-accent-200); /* ---------- STARI ---------- */ --ok: var(--c-ok-500); --ok-quiet: var(--c-ok-50); --warn: var(--c-warn-500); --warn-quiet: var(--c-warn-50); --danger: var(--c-danger-500); --danger-quiet: var(--c-danger-50); /* ---------- FOCUS ---------- */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-accent-500) 45%, transparent); --focus-offset: 2px; /* ---------- SPATIERE (baza 4px) ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 1.75rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* ---------- RITM DE PAGINA ---------- */ --section-y: clamp(4rem, 2rem + 6vw, 7.5rem); --container: 78rem; /* 1248px */ --container-narrow: 46rem; --gutter: clamp(1.25rem, 4vw, 2.5rem); /* ---------- RAZE ---------- */ --r-xs: calc(0.375rem * var(--theme-radius-scale, 1)); --r-sm: calc(0.625rem * var(--theme-radius-scale, 1)); --r-md: calc(0.875rem * var(--theme-radius-scale, 1)); --r-lg: calc(1.25rem * var(--theme-radius-scale, 1)); --r-xl: calc(1.75rem * var(--theme-radius-scale, 1)); --r-2xl: calc(2.5rem * var(--theme-radius-scale, 1)); --r-pill: 999px; /* ---------- ELEVATIE ---------- */ --sh-1: 0 1px 2px rgba(24,36,47,.06), 0 1px 3px rgba(24,36,47,.07); --sh-2: 0 4px 12px -2px rgba(24,36,47,.10), 0 2px 6px -3px rgba(24,36,47,.07); --sh-3: 0 12px 32px -8px rgba(24,36,47,.15), 0 4px 12px -6px rgba(24,36,47,.08); --sh-4: 0 28px 64px -18px rgba(24,36,47,.26), 0 8px 20px -10px rgba(24,36,47,.10); --sh-glow: 0 0 0 1px color-mix(in srgb, var(--c-accent-500) 35%, transparent), 0 10px 34px -10px color-mix(in srgb, var(--c-accent-500) 55%, transparent); --sh-inset: inset 0 1px 0 rgba(255,255,255,.6); /* ---------- MISCARE ---------- */ --dur-1: calc(120ms * var(--theme-motion-scale, 1)); --dur-2: calc(180ms * var(--theme-motion-scale, 1)); --dur-3: calc(240ms * var(--theme-motion-scale, 1)); --dur-4: calc(320ms * var(--theme-motion-scale, 1)); --dur-5: calc(520ms * var(--theme-motion-scale, 1)); --dur-6: calc(760ms * var(--theme-motion-scale, 1)); --ease-standard: cubic-bezier(.2,.6,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --ease-spring: cubic-bezier(.34,1.4,.64,1); /* ---------- LAYERE ---------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-overlay: 800; --z-modal: 900; --z-toast: 1000; } /* ============================================================ SUPRAFATA INCHISA Se pune pe orice sectiune:
Toti tokenii semantici se rastoarna, componentele nu se schimba deloc. Aici cyanul devine culoare de TEXT (6.4:1 pe brand-900). ============================================================ */ [data-surface="dark"] { --bg: var(--c-brand-900); --bg-subtle: var(--c-brand-800); --bg-inset: var(--c-brand-950); --surface: color-mix(in srgb, var(--c-brand-800) 70%, var(--c-brand-900)); --surface-hover: var(--c-brand-800); --surface-raised:var(--c-brand-800); --ink: var(--c-neutral-0); --ink-strong: var(--c-neutral-0); --ink-muted: var(--c-brand-300); --ink-subtle: var(--c-brand-400); --ink-inverse: var(--c-brand-900); --border: color-mix(in srgb, var(--c-neutral-0) 12%, transparent); --border-strong: color-mix(in srgb, var(--c-neutral-0) 24%, transparent); --divider: color-mix(in srgb, var(--c-neutral-0) 8%, transparent); --primary: var(--c-accent-500); --primary-hover: var(--c-accent-400); --primary-active:var(--c-accent-300); --primary-ink: var(--c-brand-900); --primary-quiet: color-mix(in srgb, var(--c-accent-500) 14%, transparent); --accent-text: var(--c-accent-300); --accent-quiet: color-mix(in srgb, var(--c-accent-500) 12%, transparent); --accent-line: color-mix(in srgb, var(--c-accent-500) 40%, transparent); --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 6px 16px -4px rgba(0,0,0,.5); --sh-3: 0 16px 40px -12px rgba(0,0,0,.6); --sh-4: 0 32px 72px -20px rgba(0,0,0,.7); color: var(--ink); background: var(--bg); } /* Mod intunecat complet (optional, per site) */ [data-theme="dark"] { color-scheme: dark; }