/* Zeno Design System — tokens * Derivado do Manual de Marca Zeno 2.0. * Uso: importe este arquivo e aplique data-theme="light" | "dark" no . * Valores marcados [manual] vêm literalmente do manual; os demais são * extensões necessárias para produto digital (ramps, estados, semânticos). * * --------------------------------------------------------------------------- * ARTEFATO VENDORIZADO — cópia literal de `tokens/zeno.css` do projeto de * design (claude.ai/design, "Zeno Design System"). Não editar à mão: quando o * design system evoluir, substitua o arquivo inteiro. * * PORTÁTIL: não referencia nada deste projeto. Copie para qualquer webapp Zeno * como está. Todo o acoplamento com o Litis mora em `zeno-litis.css`. * (Há um teste que falha se `--color-*` / `.proposal-*` / `data-produto` * aparecerem aqui — frontend/runtime/zeno-tokens.test.js.) * --------------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500&display=swap"); :root { /* ---------- Marca ---------- */ --zn-brand-purple: #8b32ca; /* [manual] cor de chamada principal */ --zn-brand-lilac: #d0ace9; /* [manual] */ --zn-brand-ink: #202020; /* [manual] */ --zn-brand-gray: #535353; /* [manual] */ /* ---------- Escala roxo ---------- */ --zn-purple-50: #f7f0fc; --zn-purple-100: #efe0f9; --zn-purple-200: #e0c5f2; --zn-purple-300: #d0ace9; /* [manual] */ --zn-purple-400: #b171dc; --zn-purple-500: #8b32ca; /* [manual] */ --zn-purple-600: #7628ac; --zn-purple-700: #5f208b; --zn-purple-800: #48186a; --zn-purple-900: #331149; /* ---------- Escala neutra ---------- */ --zn-neutral-0: #ffffff; /* [manual] */ --zn-neutral-25: #f8fafc; /* [manual] */ --zn-neutral-50: #f5f5f5; /* [manual] */ --zn-neutral-100: #f2f2f2; /* [manual] */ --zn-neutral-200: #e4e4e4; --zn-neutral-300: #cfcfcf; --zn-neutral-400: #a3a3a3; --zn-neutral-500: #7a7a7a; --zn-neutral-600: #535353; /* [manual] */ --zn-neutral-700: #3d3d3d; --zn-neutral-800: #2c2c2c; --zn-neutral-900: #202020; /* [manual] */ --zn-neutral-950: #141414; /* ---------- Semânticos (extensão) ---------- */ --zn-success-500: #16a34a; --zn-success-50: #ecfdf3; --zn-warning-500: #d97706; --zn-warning-50: #fef6e7; --zn-danger-500: #dc2626; --zn-danger-50: #fdeced; --zn-info-500: #2563eb; --zn-info-50: #eef3fe; /* ---------- Tipografia ---------- */ --zn-font-sans: "Inter", -apple-system, "Segoe UI", sans-serif; --zn-font-support: "Roboto", -apple-system, "Segoe UI", sans-serif; /* regra do 8 (manual): 48 → 40 → 32 → 26 → 20 → 18 → 16 → 14 → 12 */ --zn-text-display: 48px; --zn-text-h1: 40px; --zn-text-h2: 32px; --zn-text-h3: 26px; --zn-text-h4: 20px; --zn-text-lg: 18px; --zn-text-md: 16px; --zn-text-sm: 14px; --zn-text-xs: 12px; --zn-weight-regular: 400; --zn-weight-medium: 500; --zn-weight-semibold: 600; --zn-weight-bold: 700; --zn-leading-tight: 1.2; --zn-leading-snug: 1.35; /* [manual] 1.3–1.6 */ --zn-leading-normal: 1.5; --zn-leading-relaxed: 1.6; --zn-tracking-tight: -0.02em; --zn-tracking-normal: 0; --zn-tracking-wide: 0.04em; /* ---------- Espaçamento (base 8) ---------- */ --zn-space-1: 4px; --zn-space-2: 8px; --zn-space-3: 12px; --zn-space-4: 16px; --zn-space-5: 24px; --zn-space-6: 32px; --zn-space-7: 40px; --zn-space-8: 48px; --zn-space-9: 64px; --zn-space-10: 80px; /* ---------- Raio ---------- */ --zn-radius-xs: 4px; --zn-radius-sm: 6px; --zn-radius-md: 8px; --zn-radius-lg: 12px; --zn-radius-xl: 16px; --zn-radius-full: 999px; /* ---------- Sombra (discreta — manual proíbe sombras fortes) ---------- */ --zn-shadow-xs: 0 1px 2px rgba(32, 32, 32, 0.06); --zn-shadow-sm: 0 1px 3px rgba(32, 32, 32, 0.08); --zn-shadow-md: 0 4px 12px rgba(32, 32, 32, 0.08); --zn-shadow-lg: 0 12px 32px rgba(32, 32, 32, 0.10); /* ---------- Microgradientes [manual] ---------- */ --zn-gradient-subtle: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); --zn-gradient-brand: linear-gradient(135deg, #8b32ca 0%, #7628ac 100%); --zn-gradient-lilac: linear-gradient(135deg, #f7f0fc 0%, #efe0f9 100%); /* ---------- Movimento ---------- */ --zn-duration-fast: 120ms; --zn-duration-base: 180ms; --zn-duration-slow: 280ms; --zn-ease: cubic-bezier(0.2, 0, 0, 1); /* ---------- Layout ---------- */ --zn-container: 1200px; --zn-sidebar-width: 264px; --zn-control-height: 40px; /* densidade confortável */ --zn-control-height-sm: 32px; --zn-control-height-lg: 48px; --zn-hairline: 1px; /* [manual] barras finas */ --zn-focus-ring: 0 0 0 3px rgba(139, 50, 202, 0.28); } /* ================= Tema claro (padrão do manual) ================= */ :root, [data-theme="light"] { --zn-bg: #f8fafc; --zn-bg-subtle: #f2f2f2; --zn-surface: #ffffff; --zn-surface-raised: #ffffff; --zn-surface-sunken: #f5f5f5; --zn-border: #e4e4e4; --zn-border-strong: #cfcfcf; --zn-text: #202020; --zn-text-secondary: #535353; --zn-text-muted: #7a7a7a; --zn-text-inverse: #ffffff; --zn-text-brand: #7628ac; --zn-accent: #8b32ca; --zn-accent-hover: #7628ac; --zn-accent-active: #5f208b; --zn-accent-soft: #f7f0fc; --zn-accent-soft-border: #e0c5f2; --zn-on-accent: #ffffff; --zn-overlay: rgba(32, 32, 32, 0.45); } /* ================= Tema escuro ================= */ [data-theme="dark"] { --zn-bg: #141414; --zn-bg-subtle: #1a1a1a; --zn-surface: #202020; --zn-surface-raised: #2c2c2c; --zn-surface-sunken: #1a1a1a; --zn-border: #3d3d3d; --zn-border-strong: #535353; --zn-text: #f5f5f5; --zn-text-secondary: #cfcfcf; --zn-text-muted: #a3a3a3; --zn-text-inverse: #202020; --zn-text-brand: #d0ace9; --zn-accent: #a855e0; /* clareado p/ contraste AA sobre #202020 */ --zn-accent-hover: #b171dc; --zn-accent-active: #d0ace9; --zn-accent-soft: #2a1a38; --zn-accent-soft-border: #48186a; --zn-on-accent: #ffffff; --zn-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --zn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --zn-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --zn-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --zn-gradient-subtle: linear-gradient(180deg, #202020 0%, #1a1a1a 100%); --zn-gradient-lilac: linear-gradient(135deg, #2a1a38 0%, #331149 100%); --zn-overlay: rgba(0, 0, 0, 0.6); }