/* * 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 */ --space-20: 5rem; /* 80px */ /* ========== BORDER RADIUS ========== */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --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-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 1.8; --font-normal: 400; --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); --transition-default: var(--duration-fast) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-in-out); /* ========== Z-INDEX ========== */ --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 500; --z-toast: 700; /* ========== 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; --card-foreground: var(--zinc-950); --muted: var(--zinc-100); --muted-foreground: var(--zinc-500); --border: var(--zinc-200); --border-hover: var(--zinc-300); --input: var(--zinc-200); --ring: var(--zinc-400); /* Acao primaria — herdada de --evte-primary via core.php */ --primary: var(--evte-primary, #0056b3); --primary-foreground: #fff; /* Destructive / erro */ --destructive: #dc2626; --destructive-foreground: #fff; /* Success */ --success: #16a34a; --success-foreground: #fff; /* ========== LAYOUT ========== */ --site-width: 1400px; --content-width: 1200px; --sidebar-width: 350px; --gutter: var(--space-5); --section-gap: var(--space-8); } /* ========== 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 */ --card-foreground: var(--zinc-100); --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); --ring: var(--zinc-600); --primary-foreground: var(--zinc-900); --destructive: #ef4444; --success: #22c55e; /* 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); } /* 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); --card-foreground: var(--zinc-100); --muted: var(--zinc-800); --muted-foreground: var(--zinc-400); --border: #2e2e33; --border-hover: var(--zinc-600); --input: var(--zinc-800); --ring: var(--zinc-600); --primary-foreground: var(--zinc-900); } } /* ========== REDUCED MOTION ========== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; } }