/* ============================================================ InCont-rol — Design tokens (IRIS light theme) v3.0 — rebrand 2026-05-18, înlocuiește paleta lb business neutral cu paleta violet IRIS. Numele tokens (--lb-*) rămân identice pentru compatibilitate pe paginile încă nemigrate. Atribute pe (citite la load din js/api.js applyUiPreferences): data-accent ∈ violet (default) | indigo | cyan | rose data-bg ∈ lavender (default) | cream | ice data-density ∈ compact (default) | default | spacious ============================================================ */ /* Phase 5 Task 6 (2026-05-22): Schrems II compliance — Figtree is now self-hosted via /fonts/fonts.css (loaded BEFORE this file in every HTML head). No more Google Fonts CDN import. */ :root { /* ── Brand accent (violet IRIS = default). Suprascris dinamic prin :root[data-accent="…"]. Numele vechi --lb-accent rămâne API-ul comun. */ --lb-accent: #7c3aed; --lb-accent-600: #6d28d9; --lb-accent-700: #5b21b6; --lb-accent-50: #f5f3ff; --lb-accent-100: #ede9fe; --lb-accent-light: #8b5cf6; --lb-accent-glow: rgba(124, 58, 237, 0.22); /* Aliase semantice pentru paginile noi (vezi „Modul" cards, sidebar group strips). */ --lb-violet: #6d28d9; --lb-violet-m: #7c3aed; --lb-violet-l: #8b5cf6; --lb-violet-pale: #ede9fe; --lb-violet-bg: #f5f3ff; /* ── Status colors (semantic; nu se schimbă cu accentul). */ --lb-info: #0e7490; --lb-info-50: #ecfeff; --lb-info-100: #cffafe; --lb-cyan: #0e7490; --lb-cyan-m: #0891b2; --lb-cyan-pale: #cffafe; --lb-cyan-bg: #ecfeff; --lb-success: #047857; --lb-success-50: #ecfdf5; --lb-success-100: #d1fae5; --lb-green: #047857; --lb-green-m: #059669; --lb-green-pale: #d1fae5; --lb-green-bg: #ecfdf5; --lb-danger: #be123c; --lb-danger-50: #fff1f2; --lb-danger-100: #ffe4e6; --lb-red: #be123c; --lb-red-pale: #ffe4e6; --lb-red-bg: #fff1f2; --lb-warn: #b45309; --lb-warn-50: #fffbeb; --lb-warn-100: #fde68a; --lb-amber: #92400e; --lb-amber-m: #b45309; --lb-amber-pale: #fde68a; --lb-amber-bg: #fffbeb; /* ── Backgrounds (lavender = default IRIS; override cu data-bg). */ --lb-bg: #f0edfb; --lb-bg-inner: #f7f5fd; --lb-surface: #ffffff; --lb-surface-2: #faf9ff; --lb-card: #ffffff; --lb-card-tinted: #faf9ff; /* ── Borders / dividers (subtle violet tint pentru a se topi în paletă). */ --lb-border: rgba(109, 40, 217, 0.09); --lb-border-strong: rgba(109, 40, 217, 0.14); --lb-divider: rgba(109, 40, 217, 0.06); /* ── Text scale. t1-t4 = noul scale IRIS; aliasele lb-text-* păstrate. */ --lb-text: #1e1b4b; --lb-text-2: #475569; --lb-text-muted: #64748b; --lb-text-faint: #94a3b8; --lb-t1: #1e1b4b; --lb-t2: #64748b; --lb-t3: #94a3b8; --lb-t4: #cbd5e1; /* ── Radius scale (10/14/16/22/28). lb-radius-sm/md/lg păstrate. */ --lb-radius-sm: 10px; --lb-radius-md: 14px; --lb-radius-lg: 16px; --lb-radius-xl: 22px; --lb-radius-2xl: 28px; /* ── Shadow ladder violet (înlocuiește shadow-1/2/3 neutre). */ --lb-shadow-1: 0 1px 4px rgba(109, 40, 217, 0.07), 0 4px 16px rgba(109, 40, 217, 0.05); --lb-shadow-2: 0 2px 8px rgba(109, 40, 217, 0.08), 0 12px 32px rgba(109, 40, 217, 0.06); --lb-shadow-3: 0 4px 16px rgba(109, 40, 217, 0.10), 0 20px 48px rgba(109, 40, 217, 0.08); --lb-shadow-violet-s: var(--lb-shadow-1); --lb-shadow-violet-m: var(--lb-shadow-2); --lb-shadow-violet-l: var(--lb-shadow-3); /* ── Sidebar width + density. lb-bento-gap suprascris de data-density. */ --lb-sidebar-w: 256px; --lb-bento-gap: 12px; --lb-density: 1; /* ── Font: Figtree primar (IRIS), Inter fallback istoric. */ --lb-font: 'Figtree', 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --lb-font-num: 'Figtree', 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ════════════════════════════════════════════════════════════ ACCENT OVERRIDES — per-user prin Schimbă --lb-accent + variante + glow. Status colors RAMâN (verde succes / roșu eroare / amber warn nu sunt accent). ════════════════════════════════════════════════════════════ */ :root[data-accent="indigo"] { --lb-accent: #4338ca; --lb-accent-600: #3730a3; --lb-accent-700: #312e81; --lb-accent-50: #eef2ff; --lb-accent-100: #e0e7ff; --lb-accent-light: #6366f1; --lb-accent-glow: rgba(67, 56, 202, 0.22); --lb-violet: #3730a3; --lb-violet-m: #4338ca; --lb-violet-l: #6366f1; --lb-violet-pale: #e0e7ff; --lb-violet-bg: #eef2ff; --lb-border: rgba(67, 56, 202, 0.10); --lb-border-strong: rgba(67, 56, 202, 0.16); --lb-divider: rgba(67, 56, 202, 0.06); --lb-shadow-1: 0 1px 4px rgba(67, 56, 202, 0.07), 0 4px 16px rgba(67, 56, 202, 0.05); --lb-shadow-2: 0 2px 8px rgba(67, 56, 202, 0.08), 0 12px 32px rgba(67, 56, 202, 0.06); --lb-shadow-3: 0 4px 16px rgba(67, 56, 202, 0.10), 0 20px 48px rgba(67, 56, 202, 0.08); } :root[data-accent="cyan"] { --lb-accent: #0891b2; --lb-accent-600: #0e7490; --lb-accent-700: #155e75; --lb-accent-50: #ecfeff; --lb-accent-100: #cffafe; --lb-accent-light: #22d3ee; --lb-accent-glow: rgba(8, 145, 178, 0.22); --lb-violet: #0e7490; --lb-violet-m: #0891b2; --lb-violet-l: #22d3ee; --lb-violet-pale: #cffafe; --lb-violet-bg: #ecfeff; --lb-border: rgba(8, 145, 178, 0.10); --lb-border-strong: rgba(8, 145, 178, 0.16); --lb-divider: rgba(8, 145, 178, 0.06); --lb-shadow-1: 0 1px 4px rgba(8, 145, 178, 0.07), 0 4px 16px rgba(8, 145, 178, 0.05); --lb-shadow-2: 0 2px 8px rgba(8, 145, 178, 0.08), 0 12px 32px rgba(8, 145, 178, 0.06); --lb-shadow-3: 0 4px 16px rgba(8, 145, 178, 0.10), 0 20px 48px rgba(8, 145, 178, 0.08); } :root[data-accent="rose"] { --lb-accent: #e11d48; --lb-accent-600: #be123c; --lb-accent-700: #9f1239; --lb-accent-50: #fff1f2; --lb-accent-100: #ffe4e6; --lb-accent-light: #fb7185; --lb-accent-glow: rgba(225, 29, 72, 0.22); --lb-violet: #be123c; --lb-violet-m: #e11d48; --lb-violet-l: #fb7185; --lb-violet-pale: #ffe4e6; --lb-violet-bg: #fff1f2; --lb-border: rgba(225, 29, 72, 0.10); --lb-border-strong: rgba(225, 29, 72, 0.16); --lb-divider: rgba(225, 29, 72, 0.06); --lb-shadow-1: 0 1px 4px rgba(225, 29, 72, 0.07), 0 4px 16px rgba(225, 29, 72, 0.05); --lb-shadow-2: 0 2px 8px rgba(225, 29, 72, 0.08), 0 12px 32px rgba(225, 29, 72, 0.06); --lb-shadow-3: 0 4px 16px rgba(225, 29, 72, 0.10), 0 20px 48px rgba(225, 29, 72, 0.08); } /* ════════════════════════════════════════════════════════════ BACKGROUND OVERRIDES — per-user prin Schimbă --lb-bg + --lb-bg-inner. lavender e default deja în :root. ════════════════════════════════════════════════════════════ */ :root[data-bg="cream"] { --lb-bg: #faf7f0; --lb-bg-inner: #fffdf8; } :root[data-bg="ice"] { --lb-bg: #eef4fb; --lb-bg-inner: #f5f9fe; } /* ════════════════════════════════════════════════════════════ DENSITY OVERRIDES — per-user prin Schimbă gap-ul global bento + spacing scale pe paginile compatibile. ════════════════════════════════════════════════════════════ */ :root[data-density="default"] { --lb-bento-gap: 16px; } :root[data-density="spacious"] { --lb-bento-gap: 22px; } /* ════════════════════════════════════════════════════════════ BASE STYLES ════════════════════════════════════════════════════════════ */ html, body { background: var(--lb-bg); color: var(--lb-text); font-family: var(--lb-font); font-feature-settings: "cv11", "ss01", "ss03"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Subtle background texture — radial gradients în paleta accentă pentru profunzime. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 10% 0%, var(--lb-accent-glow) 0%, transparent 50%), radial-gradient(ellipse 60% 50% at 90% 100%, rgba(14, 116, 144, 0.06) 0%, transparent 50%), var(--lb-bg); opacity: 0.6; }