/* ============================================================================ DOZ Cuvardic · Design Tokens ---------------------------------------------------------------------------- Fonte única de verdade para cor, tipografia, espaço, raio e motion. Derivado do Manual de Identidade Visual DOZ Cuvardic (rebranding 2026). Convenção: --dc-{categoria}-{role} ex: --dc-color-primary ========================================================================== */ :root { /* ══ Cor · institucional (Manual, pág. 7) ═════════════════════════════ Estas seis cores são as únicas cores de marca. Nada fora desta lista entra como cor institucional. */ --dc-off-white: #FCFBF7; /* CMYK 0 0 2 1 */ --dc-sand: #E0DACC; /* CMYK 0 3 9 12 */ --dc-stone: #A3978E; /* CMYK 0 7 13 36 */ --dc-mocha: #9A7D5E; /* CMYK 0 19 39 40 */ --dc-cocoa: #624831; /* CMYK 0 27 50 62 */ --dc-espresso: #423125; /* CMYK 0 26 44 74 */ /* ══ Cor · superfícies ════════════════════════════════════════════════ */ --dc-color-bg: var(--dc-off-white); /* fundo do documento */ --dc-color-bg-elevated: #F5F1E8; /* hover, faixas sutis */ --dc-color-surface: #FFFFFF; /* cartões, cards produto */ --dc-color-surface-sand: var(--dc-sand); /* blocos de destaque */ /* ══ Cor · tinta (texto) ══════════════════════════════════════════════ */ --dc-color-ink: var(--dc-espresso); --dc-color-ink-soft: rgba(66, 49, 37, 0.72); /* texto secundário */ --dc-color-ink-mute: rgba(66, 49, 37, 0.52); /* legendas, meta */ --dc-color-ink-faint: rgba(66, 49, 37, 0.28); /* placeholders */ --dc-color-line: rgba(66, 49, 37, 0.14); /* borders, dividers */ --dc-color-line-soft: rgba(66, 49, 37, 0.08); /* ══ Cor · marca / ação ═══════════════════════════════════════════════ */ --dc-color-primary: var(--dc-cocoa); /* CTA principal */ --dc-color-primary-deep: var(--dc-espresso); /* hover · pressed */ --dc-color-accent: var(--dc-mocha); /* destaques, links */ --dc-color-muted: var(--dc-stone); /* ícones inativos, meta */ /* ══ Cor · status (extensão funcional — NÃO institucional) ════════════ Não estão no manual. Derivadas em oklch a partir da paleta para manter a mesma temperatura terrosa. Usar só em UI de sistema. */ --dc-color-success: #6B7355; /* sage · pago, disponível */ --dc-color-success-bg: #E9EAE0; --dc-color-warning: #A87C3E; /* âmbar · pendente, últimas peças */ --dc-color-warning-bg: #F2E8D6; --dc-color-danger: #91503C; /* brick · erro, esgotado */ --dc-color-danger-bg: #F0DDD6; --dc-color-info: var(--dc-stone); --dc-color-info-bg: #ECE8E4; /* ══ Tipografia · famílias (Manual, pág. 10) ══════════════════════════ Alexandria → principal, corpo de texto e UI (todos os pesos) EB Garamond → apoio 1, títulos e palavras de destaque Elms Sans → apoio 2, SOMENTE CAIXA ALTA (licença comercial; fallback = Alexandria 500 + tracking largo) */ --dc-font-ui: 'Alexandria', 'Alexandria Fallback', Arial, ui-sans-serif, system-ui, sans-serif; --dc-font-display: 'EB Garamond', 'EB Garamond Fallback', 'Times New Roman', serif; --dc-font-caps: 'Elms Sans', 'Alexandria', ui-sans-serif, sans-serif; --dc-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', monospace; /* Pesos Alexandria em uso (variable 100–900) */ --dc-weight-extralight: 200; --dc-weight-light: 300; --dc-weight-regular: 400; --dc-weight-medium: 500; --dc-weight-semibold: 600; --dc-weight-bold: 700; /* ══ Tipografia · escala ══════════════════════════════════════════════ */ --dc-text-2xs: 10.5px; /* smallcaps, kicker */ --dc-text-xs: 12px; --dc-text-sm: 13px; --dc-text-base: 15px; /* UI padrão */ --dc-text-md: 17px; --dc-text-lg: 21px; --dc-text-xl: 27px; --dc-text-2xl: 36px; --dc-text-3xl: 48px; --dc-text-display: 68px; /* hero editorial (EB Garamond) */ --dc-leading-tight: 1.04; --dc-leading-snug: 1.18; --dc-leading-normal: 1.55; --dc-leading-loose: 1.7; --dc-tracking-tight: -0.02em; /* display EB Garamond */ --dc-tracking-normal: 0; --dc-tracking-wide: 0.06em; /* botões, nav Alexandria */ --dc-tracking-caps: 0.18em; /* smallcaps / kicker */ --dc-tracking-doz: 0.02em; /* DOZ no logotipo */ --dc-tracking-logo: 0.34em; /* CUVARDIC no logotipo */ /* ══ Espaço (escala 4px) ══════════════════════════════════════════════ */ --dc-space-1: 4px; --dc-space-2: 8px; --dc-space-3: 12px; --dc-space-4: 16px; --dc-space-5: 20px; --dc-space-6: 24px; --dc-space-8: 32px; --dc-space-10: 40px; --dc-space-12: 48px; --dc-space-16: 64px; --dc-space-20: 80px; --dc-space-24: 96px; --dc-space-32: 128px; /* ══ Raio ═════════════════════════════════════════════════════════════ A marca é minimalista e editorial: raio pequeno, quase reto. Cards de produto são RETOS (0) — regra de identidade. */ --dc-radius-none: 0; --dc-radius-sm: 2px; --dc-radius: 4px; --dc-radius-md: 6px; --dc-radius-lg: 10px; --dc-radius-pill: 9999px; /* ══ Sombra (uso mínimo — a UI é plana e editorial) ═══════════════════ */ --dc-shadow-sm: 0 1px 2px rgba(66, 49, 37, 0.05); --dc-shadow: 0 6px 20px -8px rgba(66, 49, 37, 0.10); --dc-shadow-lg: 0 20px 50px -16px rgba(66, 49, 37, 0.18); --dc-shadow-focus: 0 0 0 3px rgba(154, 125, 94, 0.35); /* ══ Área de proteção do logo (Manual, pág. 12) ═══════════════════════ X = altura da letra "O" do logotipo. Reservar X em todos os lados. */ --dc-logo-clearspace: 1em; /* relativo ao font-size do lockup */ /* ══ Z-layers ═════════════════════════════════════════════════════════ */ --dc-z-base: 0; --dc-z-sticky: 10; --dc-z-overlay: 50; --dc-z-modal: 100; --dc-z-toast: 200; /* ══ Motion ═══════════════════════════════════════════════════════════ */ --dc-ease: cubic-bezier(.22, .61, .36, 1); --dc-ease-out: cubic-bezier(0, 0, .2, 1); --dc-duration-fast: 150ms; --dc-duration: 260ms; --dc-duration-slow: 460ms; /* ══ Alpha pré-cozido (D-07) ══════════════════════════════════════════ Tailwind opacity utilities (bg-*/NN) fazem no-op sobre cores var(); estes tokens já vêm em rgba() para scrims, tints, linhas e foco. */ --dc-color-scrim: rgba(66, 49, 37, 0.40); /* ink @40 — scrim de modal */ --dc-color-primary-tint: rgba(98, 72, 49, 0.10); /* cocoa @10 — active tint */ --dc-color-primary-line: rgba(98, 72, 49, 0.30); /* cocoa @30 — borda sutil */ --dc-color-focus: rgba(154, 125, 94, 0.35); /* == --dc-shadow-focus */ --dc-color-danger-line: rgba(145, 80, 60, 0.35); /* brick @35 — borda erro */ --dc-color-danger-strong:rgba(145, 80, 60, 0.90); /* brick @90 — erro forte */ --dc-color-surface-veil: rgba(255, 255, 255, 0.90);/* véu sobre superfície */ /* ══ Alpha pré-cozido · tinta sobre espresso (D-07) ═══════════════════ Tinta off-white sobre a superfície espresso — banda de marca do header e footer do site público. Mesmo motivo do bloco acima: text-off-white/82 cairia no no-op de opacity sobre var(). Desvio deliberado do handoff (docs/design-handoff/publico.css): ele usa .5 no .ftr h4 (4,27:1) e .45 na barra legal (3,76:1), que REPROVAM WCAG 2.1 AA. Aqui sobem para .66 e .55 (UI-SPEC §2.1, U-6). NÃO "restaurar" os números do handoff. */ --dc-color-on-espresso: var(--dc-off-white); /* 1.00 — 11,9:1 */ --dc-color-on-espresso-strong: rgba(252, 251, 247, 0.82); /* 0.82 — 8,6:1 */ --dc-color-on-espresso-soft: rgba(252, 251, 247, 0.66); /* 0.66 — 6,2:1 */ --dc-color-on-espresso-mute: rgba(252, 251, 247, 0.55); /* 0.55 — 4,8:1 */ --dc-color-on-espresso-line: rgba(252, 251, 247, 0.14); /* divisor não-textual — sem exigência AA */ } /* ══ Modo escuro ════════════════════════════════════════════════════════ Espresso vira superfície; off-white vira tinta. Marca e status seguem. */ [data-theme='dark'] { --dc-color-bg: #1C1510; --dc-color-bg-elevated: #262019; --dc-color-surface: #2E2620; --dc-color-surface-sand: #3A3128; --dc-color-ink: var(--dc-off-white); --dc-color-ink-soft: rgba(252, 251, 247, 0.74); --dc-color-ink-mute: rgba(252, 251, 247, 0.54); --dc-color-ink-faint: rgba(252, 251, 247, 0.28); --dc-color-line: rgba(252, 251, 247, 0.14); --dc-color-line-soft: rgba(252, 251, 247, 0.07); --dc-color-primary: var(--dc-mocha); --dc-color-primary-deep: #B08F6C; --dc-color-success-bg: rgba(107, 115, 85, 0.20); --dc-color-warning-bg: rgba(168, 124, 62, 0.20); --dc-color-danger-bg: rgba(145, 80, 60, 0.22); --dc-color-info-bg: rgba(163, 151, 142, 0.18); }