:root { --zt-gold: #C5A059; /* Componentes RGB de --zt-gold, para uso com modificadores de opacidade Tailwind (ex.: text-primary/50) em scripts/tailwind-leitura.config.js — CSS não permite extrair R/G/B de uma var() com hex, então mantemos os dois em paralelo. */ --zt-gold-rgb: 197 160 89; --zt-gold-bright: #D4AF37; --zt-ink: #2D2A26; --zt-ink-soft: #5C5750; --zt-ivory: #F9F5EB; --zt-paper: #F2EFE5; --zt-paper-warm: #EBE8DE; --zt-night: #0A0A0A; --zt-night-soft: #121212; --zt-charcoal: #1A1918; --zt-smoke: #E7E2D8; --zt-muted-dark: #9B9B95; --zt-wine: #8C3A3A; --zt-wine-light: #D47E7E; --zt-logo-burgundy: #3A0613; --zt-logo-burgundy-deep: #1F020A; --zt-logo-burgundy-soft: #5C1023; --zt-logo-porcelain: #FFFDF8; --zt-logo-burgundy-rgb: 58 6 19; --zt-logo-porcelain-rgb: 255 253 248; --zt-border-light: rgba(197, 160, 89, .44); --zt-border-dark: rgba(212, 175, 55, .40); --zt-font-display: 'Cinzel', serif; --zt-font-serif: 'Cormorant Garamond', serif; --zt-font-ui: 'Inter', sans-serif; } [data-scheme="light"], .scheme-light { --scheme-bg: var(--zt-ivory); --scheme-surface: var(--zt-paper); --scheme-text: var(--zt-ink); --scheme-muted: var(--zt-ink-soft); --scheme-border: var(--zt-border-light); --scheme-accent: var(--zt-gold); } [data-scheme="dark"], .scheme-dark { --scheme-bg: var(--zt-night); --scheme-surface: var(--zt-night-soft); --scheme-text: var(--zt-smoke); --scheme-muted: var(--zt-muted-dark); --scheme-border: var(--zt-border-dark); --scheme-accent: var(--zt-gold-bright); } /* ========================================================================== Tokens semânticos — ligados ao mecanismo real de tema (classe .dark em , controlada por assets/js/theme.js). [data-scheme]/.scheme-* acima ficam mantidos por compatibilidade, mas nenhum componente novo deve depender deles: use os tokens --color-* abaixo. ========================================================================== */ :root { --color-text-primary: var(--zt-ink); --color-text-secondary: var(--zt-ink-soft); --color-text-muted: var(--zt-ink-soft); --color-text-inverse: var(--zt-smoke); --color-surface: var(--zt-ivory); --color-surface-elevated: var(--zt-paper); --color-surface-sunken: var(--zt-paper-warm); --color-border: var(--zt-border-light); --color-border-subtle: rgba(197, 160, 89, .22); --color-action-primary: var(--zt-gold); --color-action-primary-hover: var(--zt-gold-bright); --color-action-on-primary: #1A1208; --color-danger: var(--zt-wine); --color-danger-hover: var(--zt-wine-light); --color-success: #3F6B47; --color-success-hover: #4E7F56; --color-warning: #8A5A22; --color-warning-hover: #9C6A2C; --zt-course-bg: var(--zt-logo-burgundy-deep); --zt-course-surface: var(--zt-logo-burgundy); --zt-course-surface-soft: var(--zt-logo-burgundy-soft); --zt-course-text: var(--zt-logo-porcelain); --zt-course-muted: rgb(var(--zt-logo-porcelain-rgb) / .68); --zt-course-border: rgb(var(--zt-logo-porcelain-rgb) / .16); --zt-course-accent: var(--zt-gold-bright); } .dark { --color-text-primary: var(--zt-smoke); --color-text-secondary: var(--zt-muted-dark); --color-text-muted: var(--zt-muted-dark); --color-text-inverse: var(--zt-ink); --color-surface: var(--zt-night); --color-surface-elevated: var(--zt-night-soft); --color-surface-sunken: var(--zt-charcoal); --color-border: var(--zt-border-dark); --color-border-subtle: rgba(212, 175, 55, .18); --color-action-primary: var(--zt-gold); --color-action-primary-hover: var(--zt-gold-bright); --color-action-on-primary: #1A1208; --color-danger: var(--zt-wine-light); --color-danger-hover: var(--zt-wine); --color-success: #7FAF83; --color-success-hover: #93C097; --color-warning: #D9A85C; --color-warning-hover: #E5BA78; } /* Nota de acessibilidade: --color-success/--color-warning são uma primeira proposta harmônica com a paleta existente (dourado + vinho). Ainda não existiam cores de sucesso/aviso no sistema. Revalidar contraste AA em componentes reais (badges, alertas) na Fase 7. */ /* ========================================================================== Escala de espaçamento — baseada nos valores px que já se repetiam sem variável em site.css/admin.css/article-diary.css (6, 8, 10, 12, 14, 16, 18, 24, 28, 32, 48px). Usar sempre --space-*, nunca px cru, em CSS novo. ========================================================================== */ :root { --space-0: 0; --space-1: .25rem; /* 4px */ --space-2: .5rem; /* 8px */ --space-3: .75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* Raio de borda */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 999px; /* Sombra — elevação genérica + o glow dourado já usado em hover de botões/cards */ --shadow-sm: 0 1px 2px rgba(10, 10, 10, .08); --shadow-md: 0 8px 24px rgba(10, 10, 10, .16); --shadow-lg: 0 18px 50px rgba(10, 10, 10, .28); --shadow-xl: 0 30px 80px rgba(10, 10, 10, .45); --shadow-glow-gold: 0 0 28px rgba(212, 175, 55, .28); /* Transição — interação (não confundir com durações de animação ambiente em animations.css) */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* Tipografia em escala — extraída do padrão já documentado em design_system.html (.ds-h1..h6/.ds-body*) */ --font-size-xs: .68rem; --font-size-sm: .78rem; --font-size-base: 1rem; --font-size-md: 1.12rem; --font-size-lg: 1.35rem; --font-size-xl: 1.8rem; --font-size-2xl: clamp(2.2rem, 4vw, 3.2rem); --font-size-3xl: clamp(3rem, 7vw, 5.5rem); --line-height-tight: 1.1; --line-height-snug: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.6; /* Breakpoints (referência para @media — CSS não permite var() em media query, mantidos aqui como documentação da escala canônica a adotar progressivamente) */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; /* Containers */ --container-sm: 640px; --container-md: 768px; --container-lg: 1120px; /* já é a largura real de .site-shell */ --container-xl: 1280px; }