/* ========================================================================== OMNIAN · DESIGN TOKENS ========================================================================== Toda decisão visual da marca, declarada como variável CSS. Mudou aqui, mudou no produto inteiro. Filosofia: - Cinco cores. Sem semântico (vermelho/verde/amarelo). - Duas vozes tipográficas: serif (pensamento) e sans (sistema). - Espaçamento em escala fixa de 8px, com half-step de 4px. - Nenhum gradiente. Nenhuma sombra. Nenhum neon. ========================================================================== */ :root { /* ----- Cores base (Capítulo 7 do brand book) -------------------------- */ --omn-paper: #F2EEE3; /* Fundo principal. A cor do silêncio. */ --omn-paper-soft: #EEE9DB; /* Fundo de seção, blocos, inset. */ --omn-paper-edge: #D6D2C5; /* Bordas finas, divisores. */ --omn-olive-deep: #3D3D1B; /* Texto, símbolo, headlines. */ --omn-olive: #6B6A2E; /* Marca, links, ações primárias. */ --omn-olive-light: #B8BA68; /* Modo escuro, destaques sutis. */ --omn-ink: #1A1B17; /* Modo escuro, contraste profundo. */ --omn-ink-soft: #2D2E28; /* Surface dentro do ink. */ --omn-stone: #888780; /* Metadados, timestamps, silêncio. */ --omn-stone-soft: #5F5E5A; /* Texto secundário sobre paper. */ --omn-bone: #E8E4D6; /* Texto principal sobre ink. */ /* ----- Aliases semânticos (para uso, não para definir) ---------------- */ --omn-bg: var(--omn-paper); --omn-bg-alt: var(--omn-paper-soft); --omn-fg: var(--omn-olive-deep); --omn-fg-soft: var(--omn-stone-soft); --omn-fg-meta: var(--omn-stone); --omn-accent: var(--omn-olive); --omn-border: var(--omn-paper-edge); /* ----- Tipografia (Capítulo 8) ---------------------------------------- */ /* Editorial: serif. Sistema: sans. Nunca se misturam num bloco. */ --omn-font-editorial: 'Fraunces', 'GT Sectra', Georgia, 'Times New Roman', serif; --omn-font-system: 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --omn-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Escala tipográfica editorial (serif) — fluida via clamp. */ /* clamp(min, preferido-em-vw, max). 1rem = 16px. */ --omn-text-display: clamp(2.75rem, 5vw + 1rem, 4.5rem); /* H1 grande */ --omn-text-h1: clamp(2rem, 3vw + 1rem, 3rem); /* H1 padrão */ --omn-text-h2: clamp(1.5rem, 2vw + 0.75rem, 2.25rem); /* H2 */ --omn-text-h3: clamp(1.25rem, 1vw + 0.875rem, 1.5rem); /* H3 */ --omn-text-lead: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); /* Lead */ --omn-text-body: 1rem; /* Body */ --omn-text-small: 0.875rem; /* Small */ --omn-text-meta: 0.75rem; /* Meta/eyebrow*/ --omn-text-micro: 0.625rem; /* Micro caps */ /* Pesos (apenas dois, conforme brand book) */ --omn-weight-regular: 400; --omn-weight-medium: 500; /* Line-height — generoso para prosa, justo para UI */ --omn-lh-tight: 1.15; /* Headlines */ --omn-lh-snug: 1.35; /* Sub-headlines */ --omn-lh-normal: 1.5; /* UI */ --omn-lh-relaxed: 1.7; /* Prosa longa */ --omn-lh-loose: 1.85; /* Prosa muito longa, leitura imersiva */ /* Letter-spacing — base, tight para grandes, wide para small caps */ --omn-tracking-tight: -0.02em; /* Display, H1 */ --omn-tracking-normal: 0; /* Body */ --omn-tracking-wide: 0.05em; /* UI labels */ --omn-tracking-caps: 0.18em; /* Eyebrow, meta caps */ --omn-tracking-mark: 0.32em; /* Wordmark OMNIAN */ /* ----- Espaçamento (escala 8px com half-step 4px) --------------------- */ --omn-space-0: 0; --omn-space-1: 0.25rem; /* 4px */ --omn-space-2: 0.5rem; /* 8px */ --omn-space-3: 0.75rem; /* 12px */ --omn-space-4: 1rem; /* 16px */ --omn-space-5: 1.5rem; /* 24px */ --omn-space-6: 2rem; /* 32px */ --omn-space-7: 3rem; /* 48px */ --omn-space-8: 4rem; /* 64px */ --omn-space-9: 6rem; /* 96px */ --omn-space-10: 8rem; /* 128px */ --omn-space-11: 12rem; /* 192px */ /* ----- Larguras de leitura (measure) ---------------------------------- */ /* Para textos longos, manter entre 60-75 caracteres por linha. */ --omn-measure-narrow: 36rem; /* ~50ch — citações, callouts */ --omn-measure: 42rem; /* ~60ch — prosa padrão */ --omn-measure-wide: 50rem; /* ~70ch — body editorial */ --omn-measure-full: 72rem; /* página, container */ /* ----- Bordas e raios (a marca é flat: sem raios grandes) ------------- */ --omn-border-thin: 0.5px; --omn-border-normal: 1px; --omn-border-accent: 2px; --omn-radius-sm: 2px; --omn-radius: 4px; --omn-radius-lg: 8px; /* Sem radius-xl. A marca não tem cantos macios. */ /* ----- Layout ---------------------------------------------------------- */ --omn-container-max: 72rem; /* 1152px */ --omn-container-pad-x: clamp(1.5rem, 4vw, 3.5rem); --omn-section-pad-y: clamp(4rem, 8vw, 6rem); /* ----- Easing e duração (calmo, sempre) ------------------------------- */ /* Animações lentas demais cansam. Rápidas demais agridem. 240-480ms. */ --omn-ease: cubic-bezier(0.4, 0, 0.2, 1); /* padrão */ --omn-ease-in: cubic-bezier(0.4, 0, 1, 1); /* saída */ --omn-ease-out: cubic-bezier(0, 0, 0.2, 1); /* entrada */ --omn-ease-breath: cubic-bezier(0.45, 0, 0.55, 1); /* respiração */ --omn-dur-fast: 160ms; --omn-dur: 280ms; --omn-dur-slow: 480ms; --omn-dur-breath: 2400ms; /* pulso de memória, cursor respirando */ /* ----- Z-index (escala curta, semântica) ------------------------------ */ --omn-z-base: 0; --omn-z-content: 1; --omn-z-sticky: 10; --omn-z-overlay: 100; --omn-z-modal: 1000; --omn-z-toast: 2000; } /* ========================================================================== MODO ESCURO ========================================================================== Inverte as cores fundamentais. Wordmark fica olive-light. Mesma marca, outra hora do dia. ========================================================================== */ @media (prefers-color-scheme: dark) { :root { --omn-bg: var(--omn-ink); --omn-bg-alt: var(--omn-ink-soft); --omn-fg: var(--omn-bone); --omn-fg-soft: #B8B5A8; --omn-fg-meta: #6B6A60; --omn-accent: var(--omn-olive-light); --omn-border: #2D2E28; } } /* Override manual quando o usuário força um tema (data-theme="dark|light"). */ [data-theme="dark"] { --omn-bg: var(--omn-ink); --omn-bg-alt: var(--omn-ink-soft); --omn-fg: var(--omn-bone); --omn-fg-soft: #B8B5A8; --omn-fg-meta: #6B6A60; --omn-accent: var(--omn-olive-light); --omn-border: #2D2E28; } [data-theme="light"] { --omn-bg: var(--omn-paper); --omn-bg-alt: var(--omn-paper-soft); --omn-fg: var(--omn-olive-deep); --omn-fg-soft: var(--omn-stone-soft); --omn-fg-meta: var(--omn-stone); --omn-accent: var(--omn-olive); --omn-border: var(--omn-paper-edge); } /* ========================================================================== PREFERÊNCIA DE MOVIMENTO REDUZIDO ========================================================================== Acessibilidade: usuários com prefers-reduced-motion não recebem animação. Pulso de memória vira destaque estático. Transições viram instantâneas. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --omn-dur-fast: 0ms; --omn-dur: 0ms; --omn-dur-slow: 0ms; --omn-dur-breath: 0ms; } }