/* ═══════════════════════════════════════════════════════════════════ AgendaPro — DESIGN TOKENS ─────────────────────────────────────────────────────────────────── Fonte única de verdade do visual. NENHUMA tela define cor, espaçamento, raio ou sombra por conta própria — tudo sai daqui. Se você precisou de um valor que não existe aqui, o valor vira token. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── MARCA ────────────────────────────────────────────────────── */ --marca-50: #EEF2FF; --marca-100: #E0E7FF; --marca-200: #C7D2FE; --marca-300: #A5B4FC; --marca-400: #818CF8; --marca-500: #6366F1; --marca-600: #4F46E5; /* primária */ --marca-700: #4338CA; /* hover */ --marca-800: #3730A3; --marca-900: #312E81; --marca-950: #1E1B4B; --cor-primaria: var(--marca-600); --cor-primaria-hover: var(--marca-700); --cor-primaria-ativa: var(--marca-800); --cor-primaria-suave: var(--marca-50); --cor-primaria-contraste: #FFFFFF; /* ── DESTAQUE (âmbar) ─────────────────────────────────────────── */ --destaque-50: #FFFBEB; --destaque-100: #FEF3C7; --destaque-400: #FBBF24; --destaque-500: #F59E0B; /* destaque */ --destaque-600: #D97706; --destaque-700: #B45309; --cor-destaque: var(--destaque-500); --cor-destaque-hover: var(--destaque-600); --cor-destaque-suave: var(--destaque-50); /* ── SEMÂNTICAS ───────────────────────────────────────────────── */ --cor-sucesso: #059669; --cor-sucesso-hover: #047857; --cor-sucesso-suave: #ECFDF5; --cor-sucesso-texto: #065F46; --cor-aviso: #D97706; --cor-aviso-hover: #B45309; --cor-aviso-suave: #FFFBEB; --cor-aviso-texto: #92400E; --cor-perigo: #DC2626; --cor-perigo-hover: #B91C1C; --cor-perigo-suave: #FEF2F2; --cor-perigo-texto: #991B1B; --cor-info: #0284C7; --cor-info-hover: #0369A1; --cor-info-suave: #F0F9FF; --cor-info-texto: #075985; /* ── NEUTRAS ──────────────────────────────────────────────────── */ --cinza-50: #FAFAFA; --cinza-100: #F4F4F5; --cinza-200: #E4E4E7; --cinza-300: #D4D4D8; --cinza-400: #A1A1AA; --cinza-500: #71717A; --cinza-600: #52525B; --cinza-700: #3F3F46; --cinza-800: #27272A; --cinza-900: #18181B; --cinza-950: #0F1117; /* ── SUPERFÍCIES (tema claro) ─────────────────────────────────── */ --bg-app: #F7F7F9; --bg-superficie: #FFFFFF; --bg-elevado: #FFFFFF; --bg-sutil: var(--cinza-50); --bg-hover: var(--cinza-100); --bg-sidebar: #FFFFFF; --bg-topbar: #FFFFFF; --borda: var(--cinza-200); --borda-sutil: var(--cinza-100); --borda-forte: var(--cinza-300); /* ── TEXTO (tema claro) ───────────────────────────────────────── */ --texto-forte: var(--cinza-900); --texto-normal: var(--cinza-700); --texto-fraco: var(--cinza-500); --texto-tenue: var(--cinza-400); --texto-invertido: #FFFFFF; --texto-link: var(--marca-600); /* ── ESPAÇAMENTO (escala fixa — nada fora daqui) ──────────────── */ --esp-1: 0.25rem; /* 4px */ --esp-2: 0.5rem; /* 8px */ --esp-3: 0.75rem; /* 12px */ --esp-4: 1rem; /* 16px */ --esp-5: 1.5rem; /* 24px */ --esp-6: 2rem; /* 32px */ --esp-7: 3rem; /* 48px */ --esp-8: 4rem; /* 64px */ /* ── RAIO ─────────────────────────────────────────────────────── */ --raio-sm: 6px; --raio-md: 10px; --raio-lg: 16px; --raio-xl: 22px; --raio-full: 999px; /* ── SOMBRA (sutis: sombra pesada envelhece a tela) ───────────── */ --sombra-sutil: 0 1px 2px 0 rgb(24 24 27 / 0.05); --sombra-media: 0 2px 8px -1px rgb(24 24 27 / 0.08), 0 1px 3px -1px rgb(24 24 27 / 0.04); --sombra-elevada: 0 12px 28px -8px rgb(24 24 27 / 0.14), 0 4px 10px -4px rgb(24 24 27 / 0.06); --sombra-marca: 0 4px 14px -4px rgb(79 70 229 / 0.35); /* ── TIPOGRAFIA ───────────────────────────────────────────────── */ --fonte-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --fonte-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --fonte-numero: var(--fonte-base); --txt-xs: 0.75rem; /* 12px */ --txt-sm: 0.8125rem; /* 13px */ --txt-base: 0.875rem; /* 14px */ --txt-md: 1rem; /* 16px */ --txt-lg: 1.125rem; /* 18px */ --txt-xl: 1.375rem; /* 22px */ --txt-2xl: 1.75rem; /* 28px */ --txt-3xl: 2.25rem; /* 36px */ --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-forte: 700; --altura-apertada: 1.25; --altura-normal: 1.5; --altura-solta: 1.7; /* ── TRANSIÇÃO (nunca linear, nunca acima de 300ms em UI) ─────── */ --curva: cubic-bezier(0.4, 0, 0.2, 1); --transicao-rapida: 150ms var(--curva); --transicao-media: 250ms var(--curva); /* ── LAYOUT ───────────────────────────────────────────────────── */ --sidebar-largura: 264px; --sidebar-largura-colapsada: 72px; --topbar-altura: 64px; --tabbar-altura: 64px; --conteudo-largura-max: 1440px; /* ── FOCO ─────────────────────────────────────────────────────── */ --foco-anel: 0 0 0 3px rgb(79 70 229 / 0.35); --foco-cor: var(--marca-600); /* ── Z-INDEX (centralizado: sem número mágico espalhado) ──────── */ /* ⚠️ Um véu e o que ele escurece NUNCA compartilham camada. No empate, quem vence é quem vem depois no HTML — e o véu quase sempre vem depois. Foi assim que o menu do celular ficou embaçado e sem clique: overlay e sidebar tinham o mesmo valor. Por isso cada véu tem o seu degrau e o painel correspondente fica um acima. */ --z-base: 1; --z-sticky: 100; --z-sidebar: 200; --z-topbar: 250; --z-tabbar: 260; --z-offcanvas-fundo: 300; /* o véu escuro */ --z-offcanvas: 310; /* o menu, SEMPRE acima do véu */ --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } /* ═══════════════════════════════════════════════════════════════════ TEMA ESCURO Só as superfícies e o texto mudam. A marca fica levemente mais clara para manter contraste sobre fundo escuro. ═══════════════════════════════════════════════════════════════════ */ [data-tema="escuro"] { --cor-primaria: var(--marca-500); --cor-primaria-hover: var(--marca-400); --cor-primaria-ativa: var(--marca-300); --cor-primaria-suave: rgb(99 102 241 / 0.14); --cor-destaque: var(--destaque-400); --cor-destaque-hover: var(--destaque-500); --cor-destaque-suave: rgb(245 158 11 / 0.14); --cor-sucesso: #10B981; --cor-sucesso-hover: #34D399; --cor-sucesso-suave: rgb(16 185 129 / 0.14); --cor-sucesso-texto: #6EE7B7; --cor-aviso: #F59E0B; --cor-aviso-hover: #FBBF24; --cor-aviso-suave: rgb(245 158 11 / 0.14); --cor-aviso-texto: #FCD34D; --cor-perigo: #F87171; --cor-perigo-hover: #FCA5A5; --cor-perigo-suave: rgb(248 113 113 / 0.14); --cor-perigo-texto: #FCA5A5; --cor-info: #38BDF8; --cor-info-hover: #7DD3FC; --cor-info-suave: rgb(56 189 248 / 0.14); --cor-info-texto: #7DD3FC; --bg-app: #0F1117; --bg-superficie: #181B23; --bg-elevado: #1F232D; --bg-sutil: #14171E; --bg-hover: #262B36; --bg-sidebar: #14171E; --bg-topbar: #181B23; --borda: #2A2F3A; --borda-sutil: #22262F; --borda-forte: #3A414F; --texto-forte: #F4F4F5; --texto-normal: #C9CDD6; --texto-fraco: #8B92A0; --texto-tenue: #656C7A; --texto-invertido: #0F1117; --texto-link: var(--marca-400); --sombra-sutil: 0 1px 2px 0 rgb(0 0 0 / 0.4); --sombra-media: 0 2px 8px -1px rgb(0 0 0 / 0.5), 0 1px 3px -1px rgb(0 0 0 / 0.35); --sombra-elevada: 0 12px 28px -8px rgb(0 0 0 / 0.65), 0 4px 10px -4px rgb(0 0 0 / 0.4); --sombra-marca: 0 4px 14px -4px rgb(99 102 241 / 0.45); --foco-anel: 0 0 0 3px rgb(129 140 248 / 0.4); --foco-cor: var(--marca-400); color-scheme: dark; } /* Respeita a preferência do sistema enquanto o usuário não escolheu. O atributo data-tema no sempre vence — é a escolha explícita. */ @media (prefers-color-scheme: dark) { html:not([data-tema]) { color-scheme: dark; } }