/* ===================================================================== DESKSET, CSS MASTER (Design Tokens) --------------------------------------------------------------------- Este é o ÚNICO lugar pra mexer em cor, fonte, raio, espaçamento e sombra. Trocar um valor aqui muda o projeto inteiro. • Trocar a cor da marca de um cliente: redefina --brand • Ativar tema claro: • Trocar a fonte: --font-sans ===================================================================== */ :root { /* ---- PRIMITIVAS DE COR (paleta bruta, raramente mexer) ---- */ --c-black: #0E0E10; --c-ink-900: #131316; --c-ink-800: #17171B; --c-ink-700: #1E1E23; --c-ink-600: #26262C; --c-ink-500: #313139; --c-ink-400: #3C3C45; --c-white: #FFFFFF; --c-fog-100: #F5F5F7; --c-fog-300: #B9B9C3; --c-fog-500: #8A8A96; --c-fog-700: #63636E; --c-purple: #723CEB; --c-purple-600: #6531D6; --c-indigo: #4C11CE; --c-orange: #FF902F; --c-yellow: #FFEF63; --c-green: #37D399; --c-red: #FF5A6E; /* ---- COR DA MARCA (o que muda por cliente) ---- */ --brand: var(--c-purple); --brand-strong: var(--c-purple-600); --brand-soft: color-mix(in srgb, var(--brand) 16%, transparent); --brand-on: var(--c-white); --gradient: linear-gradient(135deg, var(--c-orange) 0%, var(--c-purple) 52%, var(--c-indigo) 100%); /* ---- TOKENS SEMÂNTICOS (o que os componentes usam) ---- */ --bg: var(--c-black); --surface-1: var(--c-ink-800); --surface-2: var(--c-ink-700); --surface-3: var(--c-ink-600); --surface-hover: var(--c-ink-600); --text-1: var(--c-fog-100); --text-2: var(--c-fog-300); --text-3: var(--c-fog-500); --text-on-brand: var(--brand-on); --line: color-mix(in srgb, var(--c-white) 7%, transparent); /* divisórias sutis, quase invisíveis */ --ok: var(--c-green); --warn: var(--c-yellow); --danger: var(--c-red); --ok-soft: color-mix(in srgb, var(--c-green) 15%, transparent); --warn-soft: color-mix(in srgb, var(--c-yellow) 15%, transparent); --danger-soft: color-mix(in srgb, var(--c-red) 15%, transparent); /* ---- TIPOGRAFIA ---- */ --font-sans: "Lufga", "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 0.9375rem; /* 15 */ --fs-md: 1.0625rem; /* 17 */ --fs-lg: 1.375rem; /* 22 */ --fs-xl: 1.875rem; /* 30 */ --fs-2xl: 2.75rem; /* 44 */ --lh-tight: 1.15; --lh-base: 1.5; /* ---- ESPAÇAMENTO (escala 4px) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ---- RAIOS ---- */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 30px; --r-pill: 999px; /* ---- SOMBRAS (elevação suave, sem bordas) ---- */ --shadow-1: 0 1px 2px rgba(0,0,0,.30); --shadow-2: 0 8px 24px rgba(0,0,0,.35); --shadow-3: 0 20px 50px rgba(0,0,0,.45); --glow-brand: 0 10px 30px color-mix(in srgb, var(--brand) 35%, transparent); /* ---- LAYOUT ---- */ --sidebar-w: 264px; --topbar-h: 72px; --content-max: 1240px; /* ---- MOVIMENTO ---- */ --ease: cubic-bezier(.4, 0, .2, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; --z-base: 1; --z-sticky: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 1500; } /* ===================================================================== TEMA CLARO, só overrides. Ative com ===================================================================== */ :root[data-theme="light"] { --bg: #F4F4F6; --surface-1: #FFFFFF; --surface-2: #FAFAFB; --surface-3: #F0F0F3; --surface-hover: #EDEDF1; --text-1: #17171B; --text-2: #4C4C56; --text-3: #8A8A96; --line: color-mix(in srgb, #000 8%, transparent); --shadow-1: 0 1px 2px rgba(20,20,30,.06); --shadow-2: 0 8px 24px rgba(20,20,30,.08); --shadow-3: 0 20px 50px rgba(20,20,30,.12); }