:root { --font-sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; --color-black: #0a0a0a; --color-white: #f0f0f0; --color-accent: #e64422; --color-muted: rgba(240, 240, 240, 0.45); --color-border: rgba(240, 240, 240, 0.12); /* Default foreground — overridden inline on when a custom bg is set */ --fg-color: var(--color-white); --fg-color-muted: rgba(240, 240, 240, 0.45); } body { font-family: var(--font-sans); font-weight: 300; background-color: var(--color-black); color: var(--fg-color); min-height: 100vh; overflow-x: hidden; } #main-content { width: 100%; min-height: 60vh; } button, .btn, .btn-secondary, #notify-me-btn { font-family: var(--font-sans); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; background-color: transparent; color: var(--color-white); border: 1px solid var(--color-border); border-radius: 0; padding: 0.625rem 1.25rem; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } button:hover, .btn:hover, .btn-secondary:hover, #notify-me-btn:hover { border-color: var(--color-white); color: var(--color-white); background-color: transparent; transform: none; opacity: 1; } button:active, .btn:active, .btn-secondary:active, #notify-me-btn:active { transform: none; } .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }