/* ========================================================================== TiLy — Theme System 3 modes: default (light), crimson (dark red + matrix rain), moon (dark navy + slow drifting stars). Themed via CSS variables on [data-theme] set on , so the existing Tailwind classes below just get remapped to variables instead of needing every page rewritten per theme. ========================================================================== */ /* ---------- 1. Theme tokens ---------- */ :root, [data-theme="default"] { --bg-primary: #f8fafc; --surface: #ffffff; --surface-alt: #f9fafb; --surface-alt-2: #f3f4f6; --text-primary: #1f2937; --text-secondary: #374151; --text-muted: #6b7280; --text-faint: #9ca3af; --border: #d1d5db; --border-light: #e5e7eb; --border-lighter: #f3f4f6; --input-bg: #ffffff; --input-text: #374151; --link: #2563eb; --link-hover: #1e40af; --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --error-bg: #fee2e2; --error-border: #f87171; --error-text: #b91c1c; --indigo: #4f46e5; --indigo-hover: #3730a3; --green: #16a34a; --green-hover: #15803d; --red: #dc2626; --red-hover: #b91c1c; --blue: #3b82f6; --blue-hover: #1d4ed8; --copy-btn-bg: #3b82f6; --copy-btn-bg-hover: #1d4ed8; --open-btn-bg: var(--green); --open-btn-bg-hover: var(--green-hover); --focus-ring: rgba(102, 126, 234, 0.5); --scrollbar-thumb: #cbd5e1; --selection-bg: #c7d2fe; color-scheme: light; } [data-theme="crimson"] { --bg-primary: #0a0002; --surface: #150307; --surface-alt: #1d060b; --surface-alt-2: #260910; --text-primary: #ffe4e6; --text-secondary: #ffb4bb; --text-muted: #d3818b; --text-faint: #8a4a54; --border: #4a1017; --border-light: #34090f; --border-lighter: #2a070c; --input-bg: #1d060b; --input-text: #ffe4e6; --link: #ff5b6b; --link-hover: #ff96a1; --accent-gradient: linear-gradient(135deg, #7a0d1c 0%, #ff1f3d 100%); --shadow: 0 0 0 1px rgba(255, 30, 60, 0.15), 0 10px 30px rgba(255, 10, 40, 0.25); --error-bg: #2a060b; --error-border: #7a0d1c; --error-text: #ff96a1; --indigo: #ff5b6b; --indigo-hover: #ff96a1; --green: #ff1f3d; --green-hover: #7a0d1c; --red: #ff3355; --red-hover: #ff7789; --blue: #ff5b6b; --blue-hover: #ff96a1; --copy-btn-bg: #7a0d1c; --copy-btn-bg-hover: #a31226; --focus-ring: rgba(255, 30, 60, 0.45); --scrollbar-thumb: #4a1017; --selection-bg: #5c0f1a; color-scheme: dark; } [data-theme="moon"] { --bg-primary: #05060d; --surface: #0b0e1a; --surface-alt: #10142400; --surface-alt: #10142a; --surface-alt-2: #161b31; --text-primary: #e6e9f5; --text-secondary: #b9c0dd; --text-muted: #7c85ac; --text-faint: #565f83; --border: #232a4a; --border-light: #1a1f38; --border-lighter: #141830; --input-bg: #10142a; --input-text: #e6e9f5; --link: #8ab4ff; --link-hover: #b9d0ff; --accent-gradient: linear-gradient(135deg, #2a3a8f 0%, #5865f2 100%); --shadow: 0 0 0 1px rgba(88, 101, 242, 0.15), 0 10px 30px rgba(10, 14, 30, 0.6); --error-bg: #1c0f16; --error-border: #5a2438; --error-text: #ff9db3; --indigo: #8ab4ff; --indigo-hover: #b9d0ff; --green: #5865f2; --green-hover: #2a3a8f; --red: #ff8fa3; --red-hover: #ffb8c6; --blue: #8ab4ff; --blue-hover: #b9d0ff; --copy-btn-bg: #3b4bab; --copy-btn-bg-hover: #4f5fd6; --focus-ring: rgba(88, 101, 242, 0.5); --scrollbar-thumb: #232a4a; --selection-bg: #232a4a; color-scheme: dark; } /* ---------- 2. Base page remap ---------- */ html, body { background-color: var(--bg-primary); } body { color: var(--text-primary); transition: background-color 0.35s ease, color 0.35s ease; position: relative; } /* content sits above the fixed fx canvas */ body > *:not(#theme-fx-canvas):not(.theme-switcher) { position: relative; z-index: 1; } ::selection { background: var(--selection-bg); } ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); } .gradient-bg { background: var(--accent-gradient) !important; } /* ---------- 3. Surface / text / border class remap ---------- */ .bg-white { background-color: var(--surface) !important; } .bg-gray-50 { background-color: var(--surface-alt) !important; } .bg-gray-100 { background-color: var(--surface-alt-2) !important; } .text-gray-800 { color: var(--text-primary) !important; } .text-gray-900 { color: var(--text-primary) !important; } .text-gray-700 { color: var(--text-secondary) !important; } .text-gray-500 { color: var(--text-muted) !important; } .text-gray-400 { color: var(--text-faint) !important; } .border-gray-300 { border-color: var(--border) !important; } .border-gray-200 { border-color: var(--border-light) !important; } .border-gray-100 { border-color: var(--border-lighter) !important; } .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-light) !important; } .shadow-md { box-shadow: var(--shadow) !important; } /* inputs */ input[type="text"], input[type="url"], input[type="password"] { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--border) !important; } input::placeholder { color: var(--text-faint) !important; opacity: 1; } input:focus { box-shadow: 0 0 0 3px var(--focus-ring) !important; outline: none !important; } /* short-code prefix pill on the dashboard form */ #shortCode ~ *, span.bg-gray-50 { color: var(--text-muted) !important; } /* error box */ .bg-red-100 { background-color: var(--error-bg) !important; } .border-red-400 { border-color: var(--error-border) !important; } .text-red-700 { color: var(--error-text) !important; } /* links / actions */ .text-blue-600 { color: var(--link) !important; } .hover\:text-blue-800:hover { color: var(--link-hover) !important; } .hover\:text-blue-900:hover { color: var(--link-hover) !important; } .text-indigo-600 { color: var(--indigo) !important; } .hover\:text-indigo-600:hover { color: var(--indigo) !important; } .hover\:text-indigo-900:hover { color: var(--indigo-hover) !important; } .text-green-600 { color: var(--green) !important; } .hover\:text-green-900:hover { color: var(--green-hover) !important; } .text-red-600 { color: var(--red) !important; } .hover\:text-red-600:hover { color: var(--red) !important; } .hover\:text-red-900:hover { color: var(--red-hover) !important; } .hover\:text-gray-700:hover { color: var(--text-secondary) !important; } /* primary "Copy" button on the result card */ .bg-blue-500 { background-color: var(--copy-btn-bg) !important; } .hover\:bg-blue-700:hover { background-color: var(--copy-btn-bg-hover) !important; } /* "Open" button on the result card */ .tily-open-btn { background-color: var(--open-btn-bg); color: #ffffff; border: none; cursor: pointer; transition: background-color 0.2s ease; } .tily-open-btn:hover { background-color: var(--open-btn-bg-hover); } /* ---------- 4. Theme switcher widget ---------- */ .theme-switcher { position: fixed; top: 14px; right: 14px; z-index: 50; display: flex; gap: 4px; padding: 4px; background-color: var(--surface); border: 1px solid var(--border-light); border-radius: 999px; box-shadow: var(--shadow); backdrop-filter: blur(6px); } .theme-switch-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: none; background: transparent; cursor: pointer; font-size: 16px; line-height: 1; opacity: 0.55; transition: opacity 0.2s ease, background-color 0.2s ease, transform 0.15s ease; } .theme-switch-btn:hover { opacity: 0.9; transform: translateY(-1px); } .theme-switch-btn.is-active { opacity: 1; background-color: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--border); } @media (max-width: 480px) { .theme-switcher { top: 8px; right: 8px; padding: 3px; } .theme-switch-btn { width: 30px; height: 30px; font-size: 14px; } } /* fx canvas: always behind content, ignore pointer events */ #theme-fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } @media (prefers-reduced-motion: reduce) { #theme-fx-canvas { display: none !important; } }