/* Design tokens — Verbum "Aurora". * * Marca: Verbum · "DECLARE · IT · EXISTS" (selo + nome preservados). A pele * visual foi reorientada para a referência bento/glass: fundo aurora vivo, * cards de vidro (glassmorphism), cantos generosos, sombras suaves e uma * paleta vibrante (violeta como ação primária; ciano/esmeralda/âmbar/sky/rosa * como acentos categóricos). * * Direção visual: * - Base: near-black índigo (#0B0C14) com um fundo "aurora" desfocado atrás * - Primária: VIOLETA (#7C3AED → #A78BFA) — ações, links, indicadores * - Acentos categóricos: ciano, esmeralda, âmbar, sky, rosa (cards/charts) * - Ouro (#E8C879) preservado p/ herança do selo + destaque precioso raro * - Superfícies: VIDRO (translúcido + backdrop-blur) sobre o aurora * - Elevação: sombras suaves reais + hairline translúcido (não mais flat) * - Tipo: Poppins (display/sans) + JetBrains Mono (mono/specs) * * Convenção: * --color-* via tokens semânticos (`--bg`, `--surface`, etc.) * --glass-* superfícies de vidro (usadas em components.css/layout.css) * --space-* escala 8px (1=4, 2=8, 3=12, 4=16, 5=24, 6=32, 7=48, 8=64, 9=96, 10=128) * --radius-* xs 6 / sm 10 / md 12 / lg 18 / xl 24 / 2xl 30 / 3xl 36 / full 9999 * --shadow-* sombras suaves reais (sm/md/lg/card) + modal/toast/focus * --motion-* ease-out / ease-in-out / ease-spring + 4 durações * --text-* escala minor-third (1.250) base 17 * * NOTA: todos os nomes de token semântico + aliases legados foram preservados * (os ~30 módulos JS/CSS referenciam `--surface`, `--accent`, `--chart-*` etc.). * Só os VALORES mudaram. Tokens novos: --radius-2xl/3xl, --glass-*, --aurora-*, * --shadow-sm/md/lg/card. */ :root { /* ──────────── Cores cruas (não use direto — só dentro de tokens) ─────── */ /* Neutrals — near-black índigo frio, tinta clara */ --neutral-0: #ffffff; --neutral-50: #F4F5FA; /* ink — texto principal */ --neutral-100: #E4E6EF; --neutral-200: #C2C6D6; /* texto secundário */ --neutral-300: #9AA0B5; /* tagline / dim */ --neutral-400: #6F7587; /* muted */ --neutral-500: #4A4F61; --neutral-600: #343849; --neutral-700: #232636; /* surface-raised */ --neutral-800: #181B27; /* surface */ --neutral-850: #12141E; /* surface-low / inputs */ --neutral-900: #0B0C14; /* bg — painel base */ --neutral-950: #06070C; /* VIOLETA — primária (ações, links, indicadores) */ --accent-100: #EDE9FE; --accent-200: #DDD6FE; --accent-400: #A78BFA; /* violet-1 — links / brilho sobre dark */ --accent-500: #8B5CF6; /* violet vívido — hover/destaque */ --accent-600: #7C3AED; /* violet primária — botões (AA c/ branco) */ --accent-700: #6D28D9; /* pressionado */ /* OURO — herança do selo + acento precioso raro */ --gold-100: #F6E6BC; --gold-300: #E8C879; /* gold-1 */ --gold-500: #CFA94F; --gold-700: #B8923E; /* gold-2 */ /* Acentos categóricos (cards bento + charts) — vibrantes, controlados */ --c-violet: #8B5CF6; --c-cyan: #22D3EE; --c-emerald: #34D399; --c-amber: #FBBF24; --c-sky: #38BDF8; --c-rose: #FB7185; /* status — vibrantes alinhados ao tom aurora */ --success-500: #34D399; --warning-500: #FBBF24; --danger-500: #FB7185; --info-500: #38BDF8; --extra-500: #A78BFA; --cyan-500: #22D3EE; /* ──────────── Tokens semânticos — DARK MODE default ────────────────── */ color-scheme: dark; /* Surfaces — base sólida (legibilidade); o vidro vem de --glass-* em components.css/layout.css */ --bg: var(--neutral-900); --surface-low: var(--neutral-850); --surface: var(--neutral-800); --surface-raised: var(--neutral-700); --surface-input: var(--neutral-850); /* Borders — hairlines translúcidos (claros sobre o vidro) */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --border-accent: var(--accent-500); /* Text */ --text: var(--neutral-50); --text-2: var(--neutral-200); --text-dim: var(--neutral-300); --text-muted: var(--neutral-400); --text-inverse: var(--neutral-900); --text-link: var(--accent-400); /* Accent (VIOLETA — ações principais, links, indicadores) */ --accent: var(--accent-600); --accent-hover: var(--accent-700); --accent-fg: #FFFFFF; /* branco sobre violeta (AA com accent-600) */ --accent-soft: rgba(139, 92, 246, 0.16); --accent-line: rgba(167, 139, 250, 0.45); /* Gold (acento precioso — semântico) */ --gold: var(--gold-300); --gold-strong: var(--gold-700); --gold-fg: #1B1405; /* tinta escura sobre dourado */ --gold-soft: rgba(232, 200, 121, 0.14); --gold-line: rgba(232, 200, 121, 0.45); /* Status — bg sempre soft (~14% alpha) */ --color-success: var(--success-500); --color-success-bg: rgba(52, 211, 153, 0.14); --color-warning: var(--warning-500); --color-warning-bg: rgba(251, 191, 36, 0.14); --color-danger: var(--danger-500); --color-danger-bg: rgba(251, 113, 133, 0.14); --color-info: var(--info-500); --color-info-bg: rgba(56, 189, 248, 0.14); /* Overlay (modal backdrop) — escuro, frio */ --overlay: rgba(6, 7, 14, 0.72); /* ──────────── Vidro (glassmorphism) — usado por components.css/layout.css ─────────── */ /* Gradiente translúcido (efeito from-white/10 → from-white/2 da referência) */ --glass-bg: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(255,255,255,0.025)); --glass-bg-hover: linear-gradient(150deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)); /* Vidro "forte": mais opaco p/ topbar/sidebar/modal (legibilidade) */ --glass-bg-strong: linear-gradient(150deg, rgba(24,27,39,0.82), rgba(11,12,20,0.66)); --glass-blur: 14px; --glass-blur-strong:20px; --glass-border: rgba(255, 255, 255, 0.12); --glass-highlight: rgba(255, 255, 255, 0.20); /* Borda em gradiente (técnica ::before + mask em .glass-grad) */ --border-gradient: linear-gradient(160deg, rgba(255,255,255,0.24), rgba(255,255,255,0.05) 45%, rgba(255,255,255,0) 80%); /* Aurora — manchas de cor desfocadas atrás de tudo (components.css/layout.css) */ --aurora-1: rgba(124, 58, 237, 0.34); /* violeta */ --aurora-2: rgba(34, 211, 238, 0.24); /* ciano */ --aurora-3: rgba(52, 211, 153, 0.18); /* esmeralda */ /* ──────────── Aliases retrocompatíveis (modules ainda usam essas vars) */ --color-bg: var(--bg); --color-surface: var(--surface); --color-surface-2: var(--surface-raised); --color-surface-3: var(--surface-input); --color-overlay: var(--overlay); --color-border: var(--border); --color-border-strong:var(--border-strong); --color-border-accent:var(--border-accent); --color-text: var(--text); --color-text-2: var(--text-2); --color-text-dim: var(--text-dim); --color-text-muted: var(--text-muted); --color-text-inverse: var(--text-inverse); --color-link: var(--text-link); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-soft: var(--accent-soft); --color-accent-glow: var(--accent-line); --color-accent-fg: var(--accent-fg); /* ──────────── Chart palette Aurora (violeta + categóricos) ─────────── */ --chart-1: var(--accent-500); /* violeta (primary) */ --chart-2: var(--cyan-500); /* ciano */ --chart-3: var(--success-500); /* esmeralda */ --chart-4: var(--warning-500); /* âmbar */ --chart-5: var(--info-500); /* sky */ --chart-6: var(--danger-500); /* rosa */ --chart-7: var(--gold-300); /* ouro */ --chart-8: #9AA0B5; /* neutro */ --chart-track: rgba(255, 255, 255, 0.06); /* trilho de barra/donut */ --chart-grid: rgba(255, 255, 255, 0.10); /* linhas de grade */ /* ──────────── Layout dimensions ────────────────────────────────────── */ --sidebar-width: 300px; --sidebar-width-collapsed: 72px; --topbar-height: 68px; /* Glow (hover de itens interativos / botões primários) */ --glow-accent: 0 0 0 1px var(--accent-line), 0 10px 30px -8px rgba(124, 58, 237, 0.45); --shadow-card-hover: 0 22px 60px -18px rgba(0, 0, 0, 0.66); /* ──────────── Spacing — escala 8 ───────────────────────────────────── */ --space-0: 0; --space-1: 4px; /* hairlines / micro gaps */ --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-12: var(--space-7); --space-16: var(--space-8); /* ──────────── Raios (Aurora: cantos generosos, bento) ──────────────── */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 12px; /* inputs / botões */ --radius-lg: 18px; /* cards default */ --radius-xl: 24px; /* cards grandes / modal */ --radius-2xl: 30px; /* hero / bento destaque (novo) */ --radius-3xl: 36px; /* (novo) */ --radius-full: 9999px; /* ──────────── Sombras — suaves reais (não mais flat) ───────────────── */ --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.40); --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.55); --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.62); --shadow-card: 0 14px 40px -18px rgba(0, 0, 0, 0.55); --shadow-modal: 0 40px 100px -24px rgba(0, 0, 0, 0.70), 0 0 0 1px var(--glass-border); --shadow-toast: 0 18px 50px -12px rgba(0, 0, 0, 0.60), 0 0 0 1px var(--glass-border); --shadow-focus: 0 0 0 3px var(--accent-soft); /* ──────────── Motion ───────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 360ms; --motion-fast: var(--dur-fast) var(--ease-out); --motion-base: var(--dur-base) var(--ease-out); --motion-slow: var(--dur-slow) var(--ease-out); /* ──────────── Typography — Poppins + JetBrains Mono ────────────────── */ --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-heading: var(--font-display); /* Escala arejada — base 17 */ --text-xs: 13px; --text-sm: 15px; --text-base: 17px; --text-md: 18px; --text-lg: 22px; --text-xl: 28px; --text-2xl: 36px; --text-3xl: 44px; --text-4xl: 56px; --text-5xl: 72px; --leading-tight: 1.10; --leading-snug: 1.25; --leading-normal: 1.50; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-base: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* ──────────── Breakpoints (documentação — CSS usa direto em @media) ── */ /* sm 480 / md 600 / lg 960 / xl 1240 */ /* ──────────── Z-index escala ───────────────────────────────────────── */ --z-aurora: -1; --z-drawer: 40; --z-modal: 100; --z-toast: 200; } /* ───────────────────────────────────────────────────────────────────────── * Light mode — Aurora claro (papel frio #F4F5FB), violeta/categóricos vivos. * Ativação automática via prefers-color-scheme; toggle manual via data-theme. * O fundo aurora vira pastel suave (definido em components.css/layout.css). * ──────────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #EEF0F7; /* papel frio */ --surface-low: #E6E9F2; --surface: #FBFBFE; --surface-raised: #FFFFFF; --surface-input: #FFFFFF; --border: rgba(17, 20, 34, 0.10); --border-strong: rgba(17, 20, 34, 0.18); --text: #14162A; --text-2: #3A3F57; --text-dim: #5A6079; --text-muted: #818799; --text-inverse: #F4F5FA; --text-link: var(--accent-600); --accent: var(--accent-600); --accent-hover: var(--accent-700); --accent-fg: #FFFFFF; --overlay: rgba(17, 20, 34, 0.40); --accent-soft: rgba(124, 58, 237, 0.12); --accent-line: rgba(124, 58, 237, 0.36); /* Vidro claro */ --glass-bg: linear-gradient(150deg, rgba(255,255,255,0.78), rgba(255,255,255,0.55)); --glass-bg-hover: linear-gradient(150deg, rgba(255,255,255,0.92), rgba(255,255,255,0.70)); --glass-bg-strong: linear-gradient(150deg, rgba(255,255,255,0.86), rgba(244,245,251,0.74)); --glass-border: rgba(17, 20, 34, 0.10); --glass-highlight: rgba(255, 255, 255, 0.90); --border-gradient: linear-gradient(160deg, rgba(17,20,34,0.14), rgba(17,20,34,0.03) 45%, rgba(17,20,34,0) 80%); --aurora-1: rgba(124, 58, 237, 0.16); --aurora-2: rgba(34, 211, 238, 0.14); --aurora-3: rgba(52, 211, 153, 0.10); --shadow-sm: 0 2px 8px -2px rgba(17, 20, 34, 0.10); --shadow-md: 0 10px 30px -10px rgba(17, 20, 34, 0.16); --shadow-lg: 0 24px 60px -16px rgba(17, 20, 34, 0.20); --shadow-card: 0 14px 40px -18px rgba(17, 20, 34, 0.16); --chart-track: rgba(17, 20, 34, 0.06); --chart-grid: rgba(17, 20, 34, 0.10); --color-bg: var(--bg); --color-surface: var(--surface); --color-surface-2: var(--surface-raised); --color-surface-3: var(--surface-input); --color-overlay: var(--overlay); --color-border: var(--border); --color-border-strong:var(--border-strong); --color-text: var(--text); --color-text-2: var(--text-2); --color-text-dim: var(--text-dim); --color-text-muted: var(--text-muted); --color-text-inverse: var(--text-inverse); --color-link: var(--text-link); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-fg: var(--accent-fg); } } /* Override manual (toggle no topbar). Maior especificidade que o @media. */ :root[data-theme="light"] { color-scheme: light; --bg: #EEF0F7; --surface-low: #E6E9F2; --surface: #FBFBFE; --surface-raised: #FFFFFF; --surface-input: #FFFFFF; --border: rgba(17, 20, 34, 0.10); --border-strong: rgba(17, 20, 34, 0.18); --text: #14162A; --text-2: #3A3F57; --text-dim: #5A6079; --text-muted: #818799; --text-inverse: #F4F5FA; --text-link: var(--accent-600); --accent: var(--accent-600); --accent-hover: var(--accent-700); --accent-fg: #FFFFFF; --overlay: rgba(17, 20, 34, 0.40); --accent-soft: rgba(124, 58, 237, 0.12); --accent-line: rgba(124, 58, 237, 0.36); --glass-bg: linear-gradient(150deg, rgba(255,255,255,0.78), rgba(255,255,255,0.55)); --glass-bg-hover: linear-gradient(150deg, rgba(255,255,255,0.92), rgba(255,255,255,0.70)); --glass-bg-strong: linear-gradient(150deg, rgba(255,255,255,0.86), rgba(244,245,251,0.74)); --glass-border: rgba(17, 20, 34, 0.10); --glass-highlight: rgba(255, 255, 255, 0.90); --border-gradient: linear-gradient(160deg, rgba(17,20,34,0.14), rgba(17,20,34,0.03) 45%, rgba(17,20,34,0) 80%); --aurora-1: rgba(124, 58, 237, 0.16); --aurora-2: rgba(34, 211, 238, 0.14); --aurora-3: rgba(52, 211, 153, 0.10); --shadow-sm: 0 2px 8px -2px rgba(17, 20, 34, 0.10); --shadow-md: 0 10px 30px -10px rgba(17, 20, 34, 0.16); --shadow-lg: 0 24px 60px -16px rgba(17, 20, 34, 0.20); --shadow-card: 0 14px 40px -18px rgba(17, 20, 34, 0.16); --chart-track: rgba(17, 20, 34, 0.06); --chart-grid: rgba(17, 20, 34, 0.10); --color-bg: var(--bg); --color-surface: var(--surface); --color-surface-2: var(--surface-raised); --color-surface-3: var(--surface-input); --color-overlay: var(--overlay); --color-border: var(--border); --color-border-strong:var(--border-strong); --color-text: var(--text); --color-text-2: var(--text-2); --color-text-dim: var(--text-dim); --color-text-muted: var(--text-muted); --color-text-inverse: var(--text-inverse); --color-link: var(--text-link); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-fg: var(--accent-fg); } :root[data-theme="dark"] { color-scheme: dark; } /* ───────────────────────────────────────────────────────────────────────── * Reduced motion — desabilita animações além de fades curtos. * ──────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }