/* ============================================================ TOKENS — variáveis globais, reset, base ============================================================ */ :root { --ink: #0a0a0f; --ink-2: #16161f; --ink-3: #1e1e2a; --ink-4: #2a2a38; --muted: #5a5a72; --muted-2: #8888a0; --ghost: #ffffff0d; --ghost-2: #ffffff18; --ghost-3: #ffffff28; --wire: #ffffff12; --wire-2: #ffffff1e; --text: #e8e8f0; --text-2: #b8b8cc; --text-3: #888898; --amber: #f5a623; --amber-2: #f7bc57; --amber-3: #fad27a; --amber-ink: #e8960f; --amber-glow: #f5a62322; --green: #22c55e; --red: #ef4444; --yellow: #f59e0b; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--ink); color: var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; scrollbar-gutter: stable; } /* Noise texture overlay */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1000; opacity: 0.4; } /* Animations */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: none; } /* ============================================================ TEMA LIGHT — classe aplicada ao ============================================================ */ html.light { --ink: #faf9f7; --ink-2: #ffffff; --ink-3: #f1efeb; --ink-4: #e6e3dd; --muted: #8a857d; --muted-2: #6b665e; --ghost: #0000000a; --ghost-2: #00000014; --ghost-3: #00000022; --wire: #0000001c; --wire-2: #0000002e; --text: #14130f; --text-2: #34322c; --text-3: #635e55; --amber: #d8870a; --amber-2: #b8720a; --amber-3: #e8960f; --amber-ink: #a8680a; --amber-glow: #f5a62320; --green: #15803d; --red: #dc2626; --yellow: #c2700a; } html.light body { background: var(--ink); color: var(--text); } /* Noise mais subtil no light */ html.light body::before { opacity: 0.15; }