/* ============================================================================ Brave Corp · CLAREZA EDITORIAL — tema padrão para web Sistema de Marca 7.0.0-draft.1 (ago/2026) · status: DRAFT, pendente de aprovação ---------------------------------------------------------------------------- Três camadas: primitivos → semânticos → componente. Export CSS com prefixo --ce-. Nomes DTCG equivalentes anotados em cada bloco. Este tema NÃO remove os registros legados (classico, captacao, dark, noir, claro, ivory). Ele é escopado por [data-theme="clareza-editorial"] e remapeia os papéis semânticos herdados (--surface, --text-1, --accent, --line…) para que os nove componentes do núcleo funcionem sem reescrita. Ver readme > Governança. CUIDADO — homônimos que NÃO são a mesma coisa: · o registro legado [data-register="ivory"] (bege premium #F2EEE6, acento dourado) não tem relação com o primitivo --ce-ivory-100 (#F6F1E8), que aqui é só o nome do canvas quente. Não fundir, não renomear, não alterar valores. ============================================================================ */ /* --------------------------------------------------------------------------- CAMADA 1 · PRIMITIVOS — valores brutos. Nenhum papel, nenhuma decisão de uso. DTCG: color.primitive.* · font.* · space.* · radius.* · duration.* · easing.* --------------------------------------------------------------------------- */ :root { /* cor · color.primitive.* */ --ce-ivory-100: #F6F1E8; /* canvas quente */ --ce-paper-50: #FFFDF8; /* papel de leitura */ --ce-navy-950: #0B1426; /* navy estrutural */ --ce-navy-900: #142342; /* navy elevado — hover e camada tonal */ --ce-ink-900: #101B31; /* texto principal */ --ce-ink-600: #4B566B; /* texto secundário */ --ce-ink-500: #626C80; /* texto discreto, mínimo AA sobre canvas */ --ce-ink-inverse-300:#C8D0DC; /* texto inverso secundário */ --ce-yellow-500: #EACA2D; /* amarelo Brave — raro e funcional */ --ce-green-700: #2B684B; /* sucesso */ --ce-red-700: #A13F36; /* erro */ /* tipografia · font.family.* — famílias CONGELADAS, sem terceira família */ --ce-font-sans: 'Libre Franklin', sans-serif; --ce-font-mono: 'IBM Plex Mono', monospace; /* peso · font.weight.* */ --ce-weight-context: 200; /* @kind font */ --ce-weight-context-soft: 300; /* @kind font */ --ce-weight-body: 400; /* @kind font */ --ce-weight-interface: 500; /* @kind font */ --ce-weight-eyebrow: 600; /* @kind font */ --ce-weight-promise: 700; /* @kind font */ --ce-weight-captacao: 900; /* @kind font */ /* parcimônia */ /* escala tipográfica · font.size.* — mobile → desktop */ --ce-size-display-xl: clamp(44px, 5.8vw, 84px); /* @kind font */ --ce-size-display-l: clamp(38px, 4.4vw, 64px); /* @kind font */ --ce-size-h2: clamp(32px, 3.3vw, 48px); /* @kind font */ --ce-size-h3: clamp(26px, 2.3vw, 34px); /* @kind font */ --ce-size-lead: clamp(20px, 1.6vw, 24px); /* @kind font */ --ce-size-body: clamp(16px, 1.2vw, 18px); /* @kind font */ --ce-size-interface: clamp(15px, 1.1vw, 16px); /* @kind font */ --ce-size-meta: 14px; /* @kind font */ /* altura de linha · font.lineHeight.* */ --ce-leading-display: 1.04; /* @kind font */ --ce-leading-title: 1.12; /* @kind font */ --ce-leading-body: 1.62; /* @kind font */ --ce-leading-tight: 1.3; /* @kind font */ /* tracking · font.letterSpacing.* */ --ce-tracking-display: -0.03em; /* @kind font */ --ce-tracking-title: -0.02em; /* @kind font */ --ce-tracking-body: 0; /* @kind font */ --ce-tracking-eyebrow: 0.14em; /* @kind font */ /* espaço · space.* */ --ce-space-1: 4px; --ce-space-2: 8px; --ce-space-3: 12px; --ce-space-4: 16px; --ce-space-6: 24px; --ce-space-8: 32px; --ce-space-12: 48px; --ce-space-16: 64px; --ce-space-20: 80px; --ce-space-24: 96px; --ce-space-32: 128px; /* medidas de coluna · size.* */ --ce-measure-reading: 720px; --ce-measure-content: 1120px; --ce-measure-wide: 1320px; /* respiro lateral · space.inset.* */ --ce-inset-mobile: 20px; --ce-inset-tablet: 32px; --ce-inset-desktop: 64px; /* geometria · radius.* — raio 0 é o padrão editorial */ --ce-radius-0: 0; --ce-radius-2: 2px; /* controles e mídia */ --ce-radius-6: 6px; /* só superfície temporária/funcional */ --ce-radius-pill: 999px; /* só status, filtro, seleção */ /* espessura de régua · border.width.* */ --ce-rule: 1px; --ce-rule-strong: 2px; /* motion · duration.* / easing.* */ --ce-duration-fast: 120ms; /* @kind other */ --ce-duration-base: 200ms; /* @kind other */ --ce-duration-slow: 320ms; /* @kind other */ --ce-easing-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */ } /* --------------------------------------------------------------------------- CAMADA 2 · SEMÂNTICOS — papéis. É o que componente e specimen consomem. DTCG: color.semantic.* --------------------------------------------------------------------------- */ [data-theme="clareza-editorial"] { /* superfície */ --ce-canvas: var(--ce-ivory-100); --ce-surface-reading: var(--ce-paper-50); --ce-surface-tonal: #EFE8DC; /* degrau tonal sobre canvas, sem sombra */ --ce-surface-inverse: var(--ce-navy-950); --ce-surface-inverse-elevated: var(--ce-navy-900); /* texto */ --ce-text-primary: var(--ce-ink-900); --ce-text-secondary: var(--ce-ink-600); --ce-text-muted: var(--ce-ink-500); --ce-text-on-inverse: var(--ce-paper-50); --ce-text-on-inverse-secondary: var(--ce-ink-inverse-300); --ce-text-accent: var(--ce-navy-950); /* ação — sobre claro o primário é navy; o amarelo é ação SOBRE navy */ --ce-action-primary-background: var(--ce-navy-950); --ce-action-primary-text: var(--ce-paper-50); --ce-action-primary-background-hover: var(--ce-navy-900); --ce-action-oninverse-background: var(--ce-yellow-500); --ce-action-oninverse-text: var(--ce-navy-950); --ce-action-oninverse-background-hover: #F2D75A; --ce-action-secondary-border: var(--ce-ink-900); --ce-action-secondary-text: var(--ce-ink-900); /* borda e régua */ --ce-border-subtle: rgba(16, 27, 49, 0.14); --ce-border-strong: rgba(16, 27, 49, 0.28); --ce-rule-color: rgba(16, 27, 49, 0.16); --ce-rule-color-inverse: rgba(255, 253, 248, 0.18); /* foco — visível em qualquer superfície */ --ce-focus-ring: var(--ce-navy-950); --ce-focus-offset: 2px; --ce-focus-ring-inverse: var(--ce-yellow-500); /* acento — raro, funcional, nunca fundo de seção recorrente. Texto branco sobre amarelo é PROIBIDO: a tinta do amarelo é sempre navy. */ --ce-accent: var(--ce-yellow-500); --ce-accent-ink: var(--ce-navy-950); /* estado */ --ce-state-success: var(--ce-green-700); --ce-state-error: var(--ce-red-700); --ce-state-disabled-text: var(--ce-ink-500); --ce-state-disabled-surface: rgba(16, 27, 49, 0.06); /* mídia */ --ce-media-radius: var(--ce-radius-2); --ce-media-scrim: linear-gradient(180deg, rgba(11,20,38,0) 0%, rgba(11,20,38,0.72) 100%); /* @kind other */ /* ------------------------------------------------------------------------- CAMADA 3 · COMPONENTE — aponta para papéis semânticos, nunca para primitivo. DTCG: component... ------------------------------------------------------------------------- */ --ce-button-primary-background: var(--ce-action-primary-background); --ce-button-primary-text: var(--ce-action-primary-text); --ce-button-primary-background-hover: var(--ce-action-primary-background-hover); --ce-button-secondary-border: var(--ce-action-secondary-border); --ce-button-secondary-text: var(--ce-action-secondary-text); --ce-button-radius: var(--ce-radius-2); --ce-button-min-height: 48px; /* em Clareza Editorial o hover é TONAL: o filete deslocado do registro legado é neutralizado aqui, sem precisar de variante nova no componente. */ --ce-button-hover-outline: transparent; --ce-block-rule: var(--ce-rule-color); --ce-block-surface: transparent; --ce-block-surface-tonal: var(--ce-surface-tonal); --ce-block-radius: var(--ce-radius-0); --ce-eyebrow-text: var(--ce-text-secondary); --ce-eyebrow-rule: var(--ce-accent); --ce-pill-border: var(--ce-border-strong); --ce-pill-text: var(--ce-text-secondary); --ce-pill-radius: var(--ce-radius-pill); --ce-stat-value-text: var(--ce-text-primary); --ce-stat-label-text: var(--ce-text-muted); --ce-stat-rule: var(--ce-rule-color); --ce-field-border: var(--ce-border-strong); --ce-field-background: var(--ce-surface-reading); --ce-field-text: var(--ce-text-primary); --ce-field-label-text: var(--ce-text-secondary); --ce-field-focus-border: var(--ce-focus-ring); --ce-field-error-border: var(--ce-state-error); --ce-field-error-text: var(--ce-state-error); --ce-field-radius: var(--ce-radius-2); --ce-field-min-height: 48px; --ce-stepper-rule: var(--ce-rule-color); --ce-stepper-current-text: var(--ce-text-primary); --ce-stepper-current-rule: var(--ce-accent); --ce-stepper-done-text: var(--ce-text-secondary); --ce-stepper-future-text: var(--ce-text-muted); --ce-testimonial-rule: var(--ce-rule-color); --ce-testimonial-quote-text: var(--ce-text-primary); --ce-testimonial-meta-text: var(--ce-text-muted); --ce-testimonial-media-radius: var(--ce-radius-2); /* ------------------------------------------------------------------------- ALIAS DE COMPATIBILIDADE — os papéis herdados dos registros legados. Sem estes, os nove componentes do núcleo (que leem --surface/--text-1/ --accent/--line) não renderizariam dentro deste tema. Mantidos com o valor de Clareza Editorial; nenhum nome público desaparece. ------------------------------------------------------------------------- */ --surface: var(--ce-canvas); --surface-card: var(--ce-surface-reading); --text-1: var(--ce-text-primary); --text-2: var(--ce-text-secondary); --text-3: var(--ce-text-muted); --text-4: var(--ce-text-muted); --accent: var(--ce-accent); --accent-ink: var(--ce-accent-ink); --accent-spark: var(--ce-accent); --line: var(--ce-border-subtle); --line-strong: var(--ce-border-strong); color-scheme: light; /* background-COLOR, nunca o atalho `background`: o atalho zeraria background-size/position/repeat de quem herda este escopo (ex.: .ce-interlude). */ background-color: var(--ce-canvas); color: var(--ce-text-primary); } /* Dobra escura DENTRO de Clareza Editorial — inverte os papéis, mantém o tema. Não é um registro novo: é o mesmo tema em superfície inversa. */ [data-theme="clareza-editorial"] [data-surface="inverse"], [data-surface="inverse"][data-theme="clareza-editorial"] { --ce-canvas: var(--ce-surface-inverse); --ce-surface-reading: var(--ce-surface-inverse-elevated); --ce-surface-tonal: var(--ce-surface-inverse-elevated); --ce-text-primary: var(--ce-text-on-inverse); --ce-text-secondary: var(--ce-text-on-inverse-secondary); --ce-text-muted: rgba(200, 208, 220, 0.72); --ce-rule-color: var(--ce-rule-color-inverse); --ce-border-subtle: rgba(255, 253, 248, 0.16); --ce-border-strong: rgba(255, 253, 248, 0.32); --ce-focus-ring: var(--ce-focus-ring-inverse); /* sobre navy a ação primária é o amarelo */ --ce-button-primary-background: var(--ce-action-oninverse-background); --ce-button-primary-text: var(--ce-action-oninverse-text); --ce-button-primary-background-hover: var(--ce-action-oninverse-background-hover); --ce-button-secondary-border: var(--ce-text-on-inverse); --ce-button-secondary-text: var(--ce-text-on-inverse); --ce-field-background: rgba(255, 253, 248, 0.06); /* alias de compatibilidade seguem o inverso */ --surface: var(--ce-surface-inverse); --surface-card: var(--ce-surface-inverse-elevated); --text-1: var(--ce-text-on-inverse); --text-2: var(--ce-text-on-inverse-secondary); --text-3: rgba(200, 208, 220, 0.72); --text-4: rgba(200, 208, 220, 0.55); --line: rgba(255, 253, 248, 0.16); --line-strong: rgba(255, 253, 248, 0.32); color-scheme: dark; /* idem: atalho `background` aqui apagava o enquadramento de .ce-interlude */ background-color: var(--ce-canvas); color: var(--ce-text-primary); }