:root { /* Palette */ --base: #33312d; --accent: #5d62f9; --accent-hover: #4a4fe0; --accent-glow: rgba(93, 98, 249, 0.15); --accent-subtle: rgba(93, 98, 249, 0.08); --success: #00b833; --warning: #ebbf1d; --error: #e73936; /* Neutrals (warm) */ --n950: #1a1917; --n900: #33312d; --n850: #3d3b36; --n800: #4a4843; --n700: #636059; --n600: #7d7a72; --n500: #98958d; --n400: #b3b0a9; --n300: #ceccb7; --n200: #e4e2dc; --n100: #f0eeea; --n50: #f8f7f5; /* Typography */ --sans: 'Space Grotesk', system-ui, sans-serif; --mono: 'Space Mono', 'Courier New', monospace; /* Type Scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --text-7xl: 4.5rem; /* Font Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line Heights */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.7; /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; /* Layout */ --container: 1200px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Variaveis semanticas (dark mode padrao) */ --bg-primary: var(--n950); --bg-secondary: var(--n900); --bg-elevated: var(--n850); --text-primary: var(--n50); --text-secondary: var(--n200); --text-muted: var(--n400); --text-subtle: var(--n500); --text-faint: var(--n600); --border-primary: var(--n800); --border-subtle: var(--n850); } /* * Sem regra @media (prefers-color-scheme: light): o site adota dark * como padrao do produto. So a interacao explicita com o switcher do * header (que grava `theme=light` em localStorage e seta * data-theme="light" no ) ativa o tema claro. */ [data-theme="light"] { --bg-primary: var(--n50); --bg-secondary: var(--n100); --bg-elevated: white; --text-primary: var(--n900); --text-secondary: var(--n800); --text-muted: var(--n600); --text-subtle: var(--n500); --text-faint: var(--n400); --border-primary: var(--n200); --border-subtle: var(--n100); } [data-theme="dark"] { --bg-primary: var(--n950); --bg-secondary: var(--n900); --bg-elevated: var(--n850); --text-primary: var(--n50); --text-secondary: var(--n200); --text-muted: var(--n400); --text-subtle: var(--n500); --text-faint: var(--n600); --border-primary: var(--n800); --border-subtle: var(--n850); }