/* * Tivra — Design tokens * ───────────────────── * Tudo o que é transversal à página vive aqui. O `:root` é a única * fonte de verdade. Os componentes (`.btn`, `.card`, etc.) lêem estas * variáveis; nunca hardcodam valores. * * Secções: * 1. Color: ground (ground absoluto e camadas quase-seamless) * 2. Color: accent (cristal · fill activo + luz · texto/edge) * 3. Color: agents (paleta curada, rotativa) * 4. Color: text (4 níveis, AAA/AA validado) * 5. Color: legados (black, card, line, grain — mantidos * só para não partir os componentes * existentes; objetivo é removê-los) * 6. Typography (Michroma + Raleway) * 7. Spacing (escala base 4) * 8. Radii (cantos) * 9. Layout (contentor, gutter) * 10. Motion (durações) * 11. Elevation (escala sombria — substitui --line em * superfícies sem contorno) */ :root { /* ── 1. Color: ground ──────────────────────────────────────── Ground preto absoluto e camadas quase seamless. A separação entre ground e superfícies é feita por elevação (box-shadow), não por contorno. */ --bg: #000000; /* ground absoluto */ --surface: #050504; /* 1ª camada (cards, topbar, sidebar) */ --surface-2: #080807; /* 2ª camada (dentro de card, elevado) */ --selected: #121211; /* hover · row hovered · estado activo */ --elevated: #1a1918; /* muito elevado · modal, dropdown */ /* ── 2. Color: accent ──────────────────────────────────────── Dois níveis, hierarquia obrigatória. O cristal é só fill; a luz é só texto e arestas. Trocá-los é a regra que se lembra. Contraste medido: branco sobre cristal 6.27:1 PASS luz sobre bg 10.53:1 PASS luz sobre surface 10.23:1 PASS */ --primary: #4B3AFF; /* cristal · só fills (CTA, pill, mark) */ --primary-ink: #FFFFFF; /* texto sobre cristal · 6.27:1 */ --primary-glow: #A5B4FC; /* luz · texto acento · sobre bg 10.5:1 */ --primary-dim: #1B1642; /* fill tingido · badges outline */ /* ── 3. Color: agents ───────────────────────────────────────── Paleta curada para o agent identifier. Cada agent pode ser qualquer um destes, rotativo. Cristal fica como fallback / estado "agente activo" quando ainda não há atribuição. Texto sobre cada fill (verificado): cristal/white 6.27:1 PASS azul/white 3.68:1 FAIL → usa ink #050504 sobre azul ciano/white 2.77:1 FAIL → usa ink #050504 teal/white 2.49:1 FAIL → usa ink #050504 lilás/white 2.72:1 FAIL → usa ink #050504 Regra: as 4 cores mais claras usam ink escuro; cristal usa ink branco. */ --agent-cristal: var(--primary); --agent-azul: #3B82F6; --agent-ciano: #0EA5E9; --agent-teal: #14B8A6; --agent-lilas: #A78BFA; --agent-ink: #050504; /* dark ink para fills claros */ --agent-ink-2: #0B0F1F; /* fallback ligeiramente menos preto */ /* ── 4. Color: text ─────────────────────────────────────────── 4 níveis. contraste medido sobre #000 + #050504 + #121211. `--text` e `--text-4` mantêm-se como DEPRECATED ALIASES para não partir componentes que ainda os referenciam (typography.css, base.css). PR #8 substitui-os e apaga-os. @deprecated desde v0.4 → @remover @9/2026 a 10/2026 */ --text-1: #F5F5F7; /* texto principal 19.3:1 AAA */ /* @deprecated → use --text-1 */ --text: #F5F5F7; --text-2: #D1D5DB; /* lead, body 14.3:1 AAA */ --text-3: #9CA3AF; /* sublabel, caption 8.3:1 AAA */ /* @deprecated → use --text-3 */ --text-4: #b7bcc4; --mute: #8B95A5; /* nav, footer 6.9:1 AA */ --mute-2: #5C5C5C; /* ícone desactivado (decor) */ /* ── 5. Color: legados (manter para não partir CSS) ────────── Tokens da paleta anterior que sobreviveram nas folhas de componente. Estão aqui para não partir nada enquanto componentes migram, mas são DEPRECATED — substituídos por --surface, --surface-2, --selected, --line. O próximo PR (#8) move cada componente para o token novo e remove estes do ficheiro. @deprecated desde v0.4 → @remover @9/2026 a 10/2026 */ /* @deprecated → use --bg */ --black: #000000; /* @deprecated → use --surface */ --card: #050504; /* @deprecated → use --selected */ --line: #242423; /* @deprecated → use --surface-2 */ --grain: #080807; /* @deprecated → usar --line em vez, em cards */ --line-elev: #242423; /* ── 6. Typography ───────────────────────────────────────────── */ --head: "Michroma", sans-serif; --body: "Raleway", sans-serif; --size-display: clamp(28px, 5vw, 52px); --size-h1: clamp(18px, 2.2vw, 26px); --size-h2: 12px; --size-lead: 20px; --size-body: 17px; --size-caption: 12px; --lh-display: 1.22; --lh-h1: 1.35; --lh-lead: 1.55; --lh-body: 1.6; --tracking-display: 0.05em; --tracking-h1: 0.08em; --tracking-h2: 0.18em; --tracking-eyebrow: 0.16em; /* btn, card.act */ /* ── 7. Spacing ─────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; --space-10: 80px; --space-11: 120px; --space-12: 160px; /* ── 8. Radii ───────────────────────────────────────────────── */ --radius-0: 0; --radius-sm: 4px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 20px; --radius-full: 50%; /* ── 9. Layout ──────────────────────────────────────────────── */ --container-max: 1180px; --gutter: var(--space-5); /* ── 10. Motion ─────────────────────────────────────────────── */ --ease: ease-in-out; --dur-fast: 200ms; --dur-med: 500ms; --wav-cycle: 0.7s; /* ── 11. Elevation ──────────────────────────────────────────── Substitui --line em superfícies. Cada degrau aumenta a sensação de elevação via luz no topo + sombra projectada crescente. Zero border. */ --elev-0: 0 0 0 0 transparent; /* ground */ --elev-1: inset 0 1px 0 rgba(165,180,252,0.09), /* surface */ 0 8px 24px -10px rgba(0,0,0,0.6); /* surface */ --elev-2: inset 0 1px 0 rgba(165,180,252,0.10), /* s2 */ 0 16px 40px -16px rgba(0,0,0,0.7); /* s2 */ --elev-3: inset 0 1px 0 rgba(165,180,252,0.13), /* elevated */ 0 32px 60px -20px rgba(0,0,0,0.8); /* elevated */ /* ── 12. Escala monumental (página v2) ────────────────────── Tipografia de cartaz: o nome em toda a largura, números gigantes e etiquetas técnicas em mono. */ --mono: "JetBrains Mono", ui-monospace, monospace; --size-mega: clamp(64px, 21vw, 360px); --size-giant: clamp(28px, min(4.6vw, 9.5vh), 80px); --size-big: clamp(26px, min(3.6vw, 8vh), 60px); /* Michroma é larguíssima: o tamanho também é limitado pela altura, para os ecrãs baixos e as páginas com zoom. */ --size-statement: clamp(18px, min(2.4vw, 4.4vh), 42px); --size-label: 11px; --tracking-label: 0.22em; --hair: rgba(245, 245, 247, 0.12); --hair-2: rgba(245, 245, 247, 0.22); --dim-text: rgba(245, 245, 247, 0.18); --hot-1: #FF6A1A; /* laranja do cristal (assets/cag-hero) */ --hot-2: #E8336D; /* magenta */ --hot-3: #6B2BFF; /* violeta */ --hot-4: #1F8BFF; /* azul */ --grad-hot: linear-gradient(100deg, var(--hot-1), var(--hot-2) 30%, var(--hot-3) 62%, var(--hot-4)); --ok: #3DDC97; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-slow: 1200ms; /* focus ring · substituto do contorno 1px em controlos */ --focus-ring: 0 0 0 3px rgba(165,180,252,0.22); --focus-ring-strong: 0 0 0 3px rgba(75,58,255,0.55); } /* ── Breakpoint único ─────────────────────────────────────── */ :root { --bp-md-down: 900px; } @media (max-width: 900px) { :root { /* override do token aqui, se necessário no futuro */ } }