/* ================================================================ * Kelp — Tokens v2 (CONSOLIDATED ENTRY POINT) * ---------------------------------------------------------------- * Arquivo de entrada único do design system v2. * * tokens.v2.css ← ESTE ARQUIVO (orquestração) * ├── @import tokens-color.css (paleta primitiva + semantic) * ├── @import tokens-typography.css (Migra + Geist + escala) * └── adiciona: spacing 8pt, radius MISTO, easings autorais, * transitions Aesop, z-index, container max-widths, * reduced-motion safe defaults. * * Anti-AI-tell protocol: * - radius MISTO (não tudo arredondado igual): pills 999px, * cards 8px/16px, inputs 4px. Padrão "tudo radius-12" é * assinatura imediata de Tailwind starter / template IA. * - easings autorais: --ease-aesop é a assinatura motion da marca. * Curva (0.65, 0, 0.35, 1) tem peso, "respira", desacelera no * final — é o oposto de ease-in-out CSS default que parece morto. * - 8pt grid puro (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128 / 160). * - prefers-reduced-motion preserva funcionalidade, desliga só * animações decorativas. * * Versão: 2.0 * Data: 2026-04-28 * Owner: DS Token Architect — Kelp * ================================================================ */ /* ================================================================ * 1. IMPORTS — primitives já criadas (cor + tipografia) * ================================================================ */ @import url('./tokens-color.css'); @import url('./tokens-typography.css'); /* ================================================================ * 2. ADDITIVE TOKENS — spacing, radius, easings, transitions, * z-index, container max-widths * ================================================================ */ :root { /* ── SPACING — 8pt grid puro ────────────────────────────────── */ /* Regra: nunca usar valores fora desta escala. Se precisar de * 13px, usar --space-3 (12) ou --space-4 (16). Pontos fora da * grade são assinatura de pixel-pushing improvisado. */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; /* legacy alias — usado em /medicos/* */ --space-6: 24px; --space-7: 28px; /* legacy alias — usado em /medicos/* */ --space-8: 32px; --space-9: 40px; /* legacy alias — usado em /medicos/* */ --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; --space-40: 160px; /* ── ALIASES RETROCOMPATÍVEIS (não duplicar nomes em produção) ── * Páginas /medicos/cadastrar, /perguntas, /termos, /video usam * vocabulário antigo de tokens. Mantemos os aliases aqui para não * quebrar — auditoria 2026-04-30 mostrou ilegibilidade total sem eles. * Em páginas novas, usar SEMPRE os tokens canônicos: * --green-deep, --cream-light, --gold-oxidado, --text-primary-dark. */ --color-onyx: var(--green-deep); --color-cream: var(--cream-light); --color-coral: var(--gold-oxidado); --text-on-dark: var(--text-primary-dark); --text-on-dark-muted: var(--text-muted-dark); /* ── BORDER RADIUS MISTO (anti-AI-tell) ─────────────────────── */ /* Variação intencional. NÃO usar 12px sempre — isso é Tailwind * default (rounded-xl). Cada componente carrega seu radius * semântico, não um genérico. */ --radius-sharp: 4px; /* inputs, micro UI, chips angulares */ --radius-soft: 8px; /* cards default, accordions */ --radius-rounded: 16px; /* cards elevated, modals, premium */ --radius-pill: 999px; /* buttons, pill-chips, badges */ /* ── EASING CURVES CUSTOM (assinatura motion Kelp) ──────────── */ /* --ease-aesop é a curva-mãe. Aparece em quase tudo: hover, fade, * page transition. Quem viver com nosso site sente a "personalidade" * dessa curva mesmo sem identificá-la — é o que os anglos chamam * de "motion fingerprint". */ --ease-aesop: cubic-bezier(0.65, 0, 0.35, 1); /* signature Kelp — peso editorial */ --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1); /* page transitions, modais */ --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* entrada de elementos com leve overshoot */ --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* fades suaves, reveal-on-scroll */ /* ── TRANSITIONS (sempre via aesop, exceto page transitions) ── */ --transition-fast: 0.2s var(--ease-aesop); --transition-base: 0.4s var(--ease-aesop); --transition-slow: 0.6s var(--ease-aesop); --transition-page: 0.8s var(--ease-snappy); /* ── Z-INDEX SCALE (ordenado, sem números arbitrários) ──────── */ --z-base: 0; --z-elevated: 10; --z-cookie: 40; --z-sticky: 50; --z-modal: 100; --z-toast: 200; /* ── CONTAINER MAX-WIDTHS ───────────────────────────────────── */ /* narrow: páginas editoriais (manifesto, journal, blog). * default: marketing pages padrão (home, planos, FAQ). * wide: landings com imagery imersiva (hero full-bleed). */ --container-narrow: 720px; --container-default: 1280px; --container-wide: 1440px; /* ── BLUR (page transitions Aesop-style) ────────────────────── */ --blur-page: 8px; --blur-glass: 16px; } /* ================================================================ * 3. REDUCED MOTION — respeito ao usuário * ---------------------------------------------------------------- * Desliga animações decorativas, preserva transições funcionais * curtas (focus rings, mudanças de estado <100ms). Nunca esconde * conteúdo com motion. * ================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0.01ms; --transition-base: 0.01ms; --transition-slow: 0.01ms; --transition-page: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ================================================================ * 4. UTILITY CLASSES — page transitions Aesop-style * ---------------------------------------------------------------- * Aplicadas pelo interactions.v2.js no . Mantém o feel * editorial premium: fade + leve blur na saída, fade inverso * na entrada. NÃO é slide-in lateral (genérico SPA), NÃO é * scale (genérico modal). * ================================================================ */ body.page-leave { opacity: 0; filter: blur(var(--blur-page)); transition: opacity 0.4s var(--ease-snappy), filter 0.4s var(--ease-snappy); } body.page-enter { animation: kelp-page-enter 0.8s var(--ease-aesop) both; } @keyframes kelp-page-enter { from { opacity: 0; filter: blur(var(--blur-page)); } to { opacity: 1; filter: blur(0); } } /* ================================================================ * 5. REVEAL ON SCROLL — IntersectionObserver hook * ---------------------------------------------------------------- * Elementos com .reveal começam invisíveis e descem ~16px. * .reveal.in (adicionado pelo JS) traz pra posição final. * Sem JS: elementos aparecem normalmente (graceful fallback * em interactions.v2.js). * ================================================================ */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-aesop), transform 0.6s var(--ease-aesop); } .reveal.in { opacity: 1; transform: translateY(0); } /* ================================================================ * FIM — tokens.v2.css * * Próximos arquivos do sistema: * - components.v2.css (20 componentes Atomic Design) * - interactions.v2.js (micro-interactions, page transitions) * * Como importar nos HTMLs (ordem obrigatória): * * * * * tokens-color.css e tokens-typography.css NÃO precisam ser importados * separadamente — tokens.v2.css os carrega via @import. * ================================================================ */