/* reg/reg-theme.css Theme tokens + theme variants only Usage: */ /* ========================= 1) BASE TOKENS (fallback) ========================= */ :root { --bg: #0b0f14; --bg-top: #070a0f; --text: #e9eef5; --muted: #b7c2d0; --line: rgba(255, 255, 255, 0.1); --accent: #7dd3fc; --accent2: #a78bfa; --shadow: 0 18px 60px rgba(0, 0, 0, 0.45); --radius: 18px; /* Surfaces */ --card-grad-1: rgba(255, 255, 255, 0.06); --card-grad-2: rgba(255, 255, 255, 0.03); --section-bg: rgba(255, 255, 255, 0.03); --btn-bg: rgba(255, 255, 255, 0.06); --btn-bg-hover: rgba(255, 255, 255, 0.1); --input-bg: rgba(255, 255, 255, 0.06); --input-border: rgba(255, 255, 255, 0.12); /* Background blobs */ --blob1: rgba(125, 211, 252, 0.16); --blob2: rgba(167, 139, 250, 0.14); /* Helper colors */ --danger: #ff6b6b; --warn: coral; --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } input::-webkit-contacts-auto-fill-button { filter: invert(1); } input::-webkit-credentials-auto-fill-button { filter: invert(1); } /* ========================= 2) THEME OPTIONS ========================= */ body[data-theme="default"] { --bg: #0b0f14; --bg-top: #070a0f; --text: #e9eef5; --muted: #b7c2d0; --line: rgba(255, 255, 255, 0.1); --accent: #7dd3fc; --accent2: #a78bfa; --shadow: 0 18px 60px rgba(0, 0, 0, 0.45); --radius: 18px; --card-grad-1: rgba(255, 255, 255, 0.06); --card-grad-2: rgba(255, 255, 255, 0.03); --section-bg: rgba(255, 255, 255, 0.03); --btn-bg: rgba(255, 255, 255, 0.06); --btn-bg-hover: rgba(255, 255, 255, 0.1); --input-bg: rgba(255, 255, 255, 0.06); --input-border: rgba(255, 255, 255, 0.12); --blob1: rgba(125, 211, 252, 0.16); --blob2: rgba(167, 139, 250, 0.14); --danger: #ff6b6b; --warn: coral; } body[data-theme="royal"] { --accent: #a78bfa; --accent2: #f472b6; --blob1: rgba(167, 139, 250, 0.18); --blob2: rgba(244, 114, 182, 0.14); } body[data-theme="ocean"] { --accent: #34d399; --accent2: #60a5fa; --blob1: rgba(52, 211, 153, 0.16); --blob2: rgba(96, 165, 250, 0.14); } body[data-theme="sand"] { --bg: #0e0c08; --bg-top: #0b0906; --accent: #fbbf24; --accent2: #fb7185; --blob1: rgba(251, 191, 36, 0.14); --blob2: rgba(251, 113, 133, 0.12); --muted: rgb(190, 190, 200); } body[data-theme="monarch"] { --bg: #16080d; --bg-top: #0f0509; --text: #f7eef2; --muted: #d2b9c4; --line: rgba(255, 255, 255, 0.09); /* warm pink / orange app-store style glow */ --accent: #ff8a5b; --accent2: #ff5f8f; --shadow: 0 22px 70px rgba(0, 0, 0, 0.5); --radius: 20px; /* glassy dark cards like the ad */ --card-grad-1: rgba(255, 255, 255, 0.07); --card-grad-2: rgba(255, 255, 255, 0.025); --section-bg: rgba(255, 255, 255, 0.035); --btn-bg: rgba(255, 255, 255, 0.07); --btn-bg-hover: rgba(255, 255, 255, 0.11); --input-bg: rgba(255, 255, 255, 0.055); --input-border: rgba(255, 255, 255, 0.1); /* background glow blobs */ --blob1: rgba(255, 95, 143, 0.18); --blob2: rgba(255, 138, 91, 0.16); --danger: #ff7b7b; --warn: #ff9f66; }