/* * DESIGN TOKENS — Producao * Versao enxuta para o tema Evte News. * Baseado em Tailwind v4 (spacing, shadows, radius) + shadcn/ui (semantic colors). * * Uso: var(--space-4), var(--shadow-sm), var(--radius), var(--background), etc. * Dark mode: adicione class="dark" no . Todas as cores semanticas invertem. */ :root { /* ========== SPACING (base 4px) ========== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ========== BORDER RADIUS ========== */ --radius-sm: 0.25rem; /* 4px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-full: 9999px; --radius: var(--radius-lg); /* base global — muda 1 valor, tudo muda */ /* ========== SHADOWS ========== */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* ========== TYPOGRAPHY ========== */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-4xl: 2.25rem; /* 36px */ --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ========== TRANSITIONS ========== */ --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ========== NEUTRAL PALETTE (zinc) ========== */ --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7; --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a; --zinc-600: #52525b; --zinc-700: #3f3f46; --zinc-800: #27272a; --zinc-900: #18181b; --zinc-950: #09090b; /* ========== SEMANTIC COLORS (light mode) ========== */ --background: #fff; /* Branco puro — seamless layout, sem efeito encaixotado */ --foreground: var(--zinc-950); --card: #fff; /* [v2.9.38] muted-foreground escurecido de zinc-500 (#71717a) para zinc-600 (#52525b). Contraste em fundo muted (#f4f4f5) era 4.4:1 (falhava WCAG AA de 4.5:1 para texto normal). Agora ~7:1. */ --muted: var(--zinc-100); --muted-foreground: var(--zinc-600); --border: var(--zinc-200); --border-hover: var(--zinc-300); --input: var(--zinc-200); /* Acao primaria — herdada de --evte-primary via core.php */ --primary: var(--evte-primary, #0056b3); /* Destructive / erro */ --destructive: #dc2626; } /* ========== DARK MODE ========== */ /* Hierarquia visual: background < card < muted (do mais escuro ao mais claro) zinc-950 (body) → zinc-900 (cards) → zinc-800 (muted/input) Garante separacao VISUAL entre camadas */ .dark { --background: #121215; /* levemente mais claro que zinc-950, evita preto puro */ --foreground: var(--zinc-100); /* zinc-100 (#f4f4f5) em vez de zinc-50 para menos harshness */ --card: var(--zinc-900); /* #18181b */ --muted: var(--zinc-800); /* #27272a */ --muted-foreground: var(--zinc-400); /* #a1a1aa */ --border: #2e2e33; /* levemente mais claro que zinc-800 para bordas visiveis */ --border-hover: var(--zinc-600); --input: var(--zinc-800); --destructive: #ef4444; /* Sombras mais fortes no dark */ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4); --shadow-lg: 0 10px 20px -3px rgb(0 0 0 / 0.5), 0 4px 8px -4px rgb(0 0 0 / 0.4); } /* [v2.9.87] Transicao suave entre claro/escuro — evita flash brusco quando o usuario clica no toggle. Aplica em body + elementos comuns que mudam cor com o tema. Respeita prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { body, header, footer, .site-wrapper, article, .card, .focus-card, .evte-tabs, .evte-gi-health, .widget, aside { transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } } /* Auto dark mode via OS preference (quando .dark nao esta presente manualmente) */ @media (prefers-color-scheme: dark) { :root:not(.light) { --background: #121215; --foreground: var(--zinc-100); --card: var(--zinc-900); --muted: var(--zinc-800); --muted-foreground: var(--zinc-400); --border: #2e2e33; --border-hover: var(--zinc-600); --input: var(--zinc-800); } } /* ========== REDUCED MOTION ========== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; } }