/* ========================================================================== CAOSmarada Design System v1 — Tokens -------------------------------------------------------------------------- Fonte canônica: .planning/design-preview/components.html Decisões travadas: emerald herói + gold Sistema B + Geist/Mono/Serif. Importar PRIMEIRO no . Não editar valores sem validar com preview. ========================================================================== */ :root { /* ============ FUNDO — quase preto + camadas ============ */ --cmd-bg-primary: #08080a; /* fundo da página */ --cmd-bg-elevated: #0f0f13; /* superfície elevada (topnav, modais) */ --cmd-bg-surface: #13131a; /* cards */ /* ============ TEXTO ============ */ --cmd-text-primary: #f5f5f7; --cmd-text-secondary: #a8a8b0; --cmd-text-tertiary: #8b91a0; --cmd-text-muted: #83899a; /* ============ BORDA ============ */ --cmd-border-subtle: #20202a; --cmd-border-strong: #34343d; /* ============ HERÓI · EMERALD ============ */ /* CTA, brand, hover, buy, links, KEEP, P1 ação, on em pillars */ --cmd-em: #34d399; --cmd-em-soft: rgba(52, 211, 153, 0.08); --cmd-em-border: rgba(52, 211, 153, 0.22); /* ============ ATENÇÃO · AMBER ============ */ /* WATCH, hold, P1 importante, neutro elevado */ --cmd-hold: #fbbf24; --cmd-hold-soft: rgba(251, 191, 36, 0.08); --cmd-hold-border: rgba(251, 191, 36, 0.22); /* ============ CRÍTICO · ROSE ============ */ /* Sell, COLD, P0 crítico, drawdown, danger */ --cmd-sell: #fb7185; --cmd-sell-soft: rgba(251, 113, 133, 0.08); --cmd-sell-border: rgba(251, 113, 133, 0.22); /* ============ INFO · BLUE ============ */ /* P2 engajamento, briefing, dica IA. Não usar como CTA */ --cmd-info: #60a5fa; --cmd-info-soft: rgba(96, 165, 250, 0.08); --cmd-info-border: rgba(96, 165, 250, 0.22); /* ============ SISTEMA B · GOLD ============ */ /* RESERVADO Carteira CAOSmarada. Não usar em mais nada. */ --cmd-sys-b: #fbbf24; --cmd-sys-b-soft: rgba(251, 191, 36, 0.06); --cmd-sys-b-border: rgba(251, 191, 36, 0.28); /* ============ GATE de modelo (alias semântico) ============ */ --cmd-gate-keep: var(--cmd-em); --cmd-gate-watch: var(--cmd-hold); --cmd-gate-cold: var(--cmd-sell); --cmd-gate-insufficient: var(--cmd-text-tertiary); /* ============ ESPAÇO — escala 4px ============ */ --cmd-sp-1: 4px; --cmd-sp-2: 8px; --cmd-sp-3: 12px; --cmd-sp-4: 14px; /* padding card padrão (preview) */ --cmd-sp-5: 20px; --cmd-sp-6: 24px; --cmd-sp-8: 32px; --cmd-sp-10: 40px; --cmd-sp-12: 48px; /* ============ TIPOGRAFIA ============ */ /* Famílias — Geist, Geist Mono, Instrument Serif já estão importadas no */ --cmd-ff-ui: 'Geist', system-ui, -apple-system, sans-serif; --cmd-ff-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; --cmd-ff-serif: 'Instrument Serif', Georgia, serif; /* Escala (valores do preview) */ --cmd-f-display: 56px; /* Hero serif "Boa tarde, Caio" */ --cmd-f-headline: 32px; /* Section serif "O que fazer hoje" */ --cmd-f-title: 24px; /* Panel title serif */ --cmd-f-subtitle: 18px; --cmd-f-body: 14px; --cmd-f-caption: 12px; --cmd-f-micro: 11px; --cmd-f-nano: 10px; /* Micro caps Mono em labels */ --cmd-w-regular: 400; --cmd-w-medium: 500; --cmd-w-semibold: 600; --cmd-w-bold: 700; /* Letter-spacing assinatura */ --cmd-ls-serif-display: -0.02em; --cmd-ls-serif-headline: -0.01em; --cmd-ls-caps: 0.06em; /* Mono caps (labels, badges, crumbs) */ --cmd-ls-caps-wide: 0.08em; /* Crumbs e micro headers */ /* ============ RAIO ============ */ --cmd-r-xs: 4px; /* badges */ --cmd-r-sm: 6px; /* swatches, inputs */ --cmd-r-md: 10px; /* sparklines, conv-row */ --cmd-r-lg: 14px; /* cards */ --cmd-r-pill: 999px; /* chips, dots */ /* ============ SOMBRA · sutil, fundo escuro ============ */ --cmd-sh-card: 0 1px 2px rgba(0, 0, 0, 0.4); --cmd-sh-elevated: 0 4px 12px rgba(0, 0, 0, 0.5); --cmd-sh-modal: 0 16px 48px rgba(0, 0, 0, 0.6); --cmd-sh-hover-em: inset 2px 0 0 var(--cmd-em); /* ring no hover (preview) */ /* ============ ANIMAÇÃO ============ */ --cmd-t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --cmd-t-medium: 240ms cubic-bezier(0.4, 0, 0.2, 1); --cmd-t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); /* ============ Z-INDEX ============ */ --cmd-z-base: 1; --cmd-z-dropdown: 100; --cmd-z-sticky: 200; --cmd-z-overlay: 300; --cmd-z-modal: 400; --cmd-z-toast: 500; } /* ========================================================================== P2-3 (07/06/2026) — Paleta LIGHT canônica (Linear/Notion soft) -------------------------------------------------------------------------- Ativada quando . Mantém tokens cmd-* coerentes no light: bg soft (#fafafa), surface branca, text quase preto, accent emerald mantido, gold do Sistema B escurecido pra #d97706 (contraste AA em bg claro). Componentes que já usam var(--cmd-*) herdam automatico. ========================================================================== */ .light-theme { /* Fundo — soft, evita glare do branco puro durante sessões longas */ --cmd-bg-primary: #fafafa; --cmd-bg-elevated: #ffffff; --cmd-bg-surface: #ffffff; /* Texto — slate dark (Tailwind 950/600/500/400) */ --cmd-text-primary: #0f172a; --cmd-text-secondary: #475569; --cmd-text-tertiary: #64748b; --cmd-text-muted: #94a3b8; /* Borda — neutra leve, visível em bg branco */ --cmd-border-subtle: #e2e8f0; --cmd-border-strong: #cbd5e1; /* Emerald herói — mantido (#34d399 lê AA em bg claro com weight 600+) */ --cmd-em: #10b981; /* escurecido 1 step pra leitura em bg claro */ --cmd-em-soft: rgba(16, 185, 129, 0.08); --cmd-em-border: rgba(16, 185, 129, 0.30); /* Amber — escurecido pra contraste */ --cmd-hold: #d97706; --cmd-hold-soft: rgba(217, 119, 6, 0.08); --cmd-hold-border: rgba(217, 119, 6, 0.30); /* Rose — sell/danger escurecido */ --cmd-sell: #e11d48; --cmd-sell-soft: rgba(225, 29, 72, 0.08); --cmd-sell-border: rgba(225, 29, 72, 0.30); /* Info blue */ --cmd-info: #2563eb; --cmd-info-soft: rgba(37, 99, 235, 0.08); --cmd-info-border: rgba(37, 99, 235, 0.30); /* Sistema B gold — #fbbf24 fica apagado em bg branco, usa amber-600 #d97706 com border mais forte pra continuar reconhecível como "Carteira CAOSmarada" */ --cmd-sys-b: #d97706; --cmd-sys-b-soft: rgba(217, 119, 6, 0.06); --cmd-sys-b-border: rgba(217, 119, 6, 0.32); /* Sombras — em bg claro precisam ser mais sutis */ --cmd-sh-card: 0 1px 2px rgba(15, 23, 42, 0.06); --cmd-sh-elevated: 0 4px 12px rgba(15, 23, 42, 0.08); --cmd-sh-modal: 0 16px 48px rgba(15, 23, 42, 0.18); --cmd-sh-hover-em: inset 2px 0 0 var(--cmd-em); }