/* ═══════════════════════════════════════════════════════ Retroverse — Design Tokens Single source of truth for theme colors, shared across the suite. Canonical home will be shared/design/ once newtube (Next.js) consumes these too (Phase 3); kept here for now so there is exactly one copy. Themes: Cream/Coral (default light) and Teal (dark). More selectable themes (e.g. Geocities) are planned as a per-slot catalog. ORDER MATTERS: `:root` and `[data-theme="dark"]` have equal specificity, so when both match (dark mode, since is the root) source order decides. The default (:root/light) block MUST come first and the dark override AFTER, or dark mode silently resolves every token to its light value. ═══════════════════════════════════════════════════════ */ /* ── Cream / Coral theme (default light) ────────────────────── Warm cream paper, coral + amber accents, espresso nav. Deliberately nothing like the old MySpace blue — this is Remem's own light identity. */ :root, [data-theme="light"] { --c-bg: #f4ead9; --c-surface: #fffdf8; --c-card-bg: #fffdf8; --c-card-border: #e4d6bf; --c-text: #2f2a23; --c-text-muted: #6e6051; --c-text-dim: rgba(47,42,35,.45); --c-link: #c8501f; --c-link-hover: #9c3a12; --c-accent: #e0623a; --c-accent2: #e6a23c; --c-accent-bg: #fbe3d4; --c-accent-border: #ecbda6; --c-nav-bg: #36302a; --c-nav-border: #292420; --c-nav-link: rgba(255,248,236,.9); --c-nav-shadow: rgba(60,45,30,.28); --c-subnav-bg: #efe1cd; --c-subnav-border: #e1cdb0; --c-subnav-link: #3a322a; --c-section-bg: #fbe1d0; --c-section-text: #c2491f; --c-section-border: #e0623a; --c-input-bg: #fffdf8; --c-input-border: #d9c5a8; --c-th-bg: #f3e2cc; --c-th-text: #b3551f; --c-td-bg: #fbf4e9; --c-td-text: #2f2a23; --c-contact-border: #e0623a; --c-contact-hdr: #f0d8c0; --c-contact-hdr-text:#8c3c18; --c-comment-th: #fbe1d0; --c-comment-td: #fbf4e9; --c-btn-grad: linear-gradient(90deg,#e0623a,#e6a23c); --c-btn-text: #fff8ec; --c-glow: rgba(224,98,58,.22); --c-glow-sm: rgba(224,98,58,.12); --c-scrollbar: #e0623a; --c-selection: rgba(224,98,58,.22); --c-profile-url: #6e6051; --c-online: #2e9e5b; --c-brand-start: #e0623a; --c-brand-end: #e6a23c; --plyr-color-main: #e0623a; --plyr-audio-controls-background: #fbf4e9; --plyr-audio-control-color: #2f2a23; --plyr-audio-control-color-hover: #e0623a; } /* ── Teal theme (dark) — MUST come after :root (see note above) ──── */ [data-theme="dark"] { --c-bg: #080c10; --c-surface: rgba(13,30,42,.92); --c-card-bg: rgba(255,255,255,.027); --c-card-border: rgba(255,255,255,.055); --c-text: #dfeff2; --c-text-muted: #9fb8c0; --c-text-dim: rgba(223,239,242,.4); --c-link: #72f6e6; --c-link-hover: #00d4b1; --c-accent: #00d4b1; --c-accent2: #00b3ff; --c-accent-bg: rgba(0,212,177,.12); --c-accent-border: rgba(0,212,177,.32); --c-nav-bg: rgba(0,40,50,.95); --c-nav-border: rgba(0,212,177,.15); --c-nav-link: #9fb8c0; --c-nav-shadow: rgba(0,0,0,.55); --c-subnav-bg: rgba(0,212,177,.07); --c-subnav-border: rgba(0,212,177,.12); --c-subnav-link: #7db8c0; --c-section-bg: rgba(0,212,177,.12); --c-section-text: #00d4b1; --c-section-border: #00d4b1; --c-input-bg: rgba(13,30,42,.92); --c-input-border: rgba(0,212,177,.22); --c-th-bg: rgba(0,212,177,.1); --c-th-text: #72f6e6; --c-td-bg: rgba(255,255,255,.025); --c-td-text: #c8dfe5; --c-contact-border: rgba(0,212,177,.35); --c-contact-hdr: rgba(0,212,177,.15); --c-contact-hdr-text:#72f6e6; --c-comment-th: rgba(0,212,177,.12); --c-comment-td: rgba(255,255,255,.018); --c-btn-grad: linear-gradient(90deg,#00d4b1,#00b3ff); --c-btn-text: #001a20; --c-glow: rgba(0,212,177,.35); --c-glow-sm: rgba(0,212,177,.2); --c-scrollbar: #00d4b1; --c-selection: rgba(0,212,177,.25); --c-profile-url: rgba(223,239,242,.35); --c-online: #4ade80; --c-brand-start: #00ffd1; --c-brand-end: #00b3ff; /* plyr */ --plyr-color-main: #00d4b1; --plyr-audio-controls-background: rgba(10,20,28,.96); --plyr-audio-control-color: #dfeff2; --plyr-audio-control-color-hover: #00d4b1; } /* ── Geocities (neon starfield) ── */ [data-theme="geocities"] { --c-bg: #0a0024; --c-surface: #1b0a3d; --c-card-bg: #16093a; --c-card-border: #4a2a8a; --c-text: #39ff14; --c-text-muted: #00e5ff; --c-text-dim: rgba(57,255,20,.5); --c-link: #ffe600; --c-link-hover: #ff2ecc; --c-accent: #ff2ecc; --c-accent2: #00e5ff; --c-accent-bg: rgba(255,46,204,0.14); --c-accent-border: rgba(255,46,204,0.34); --c-nav-bg: #05001a; --c-nav-border: #ff2ecc; --c-nav-link: #39ff14; --c-nav-shadow: rgba(0,0,0,.5); --c-subnav-bg: rgba(255,46,204,0.09); --c-subnav-border: rgba(255,46,204,0.14); --c-subnav-link: #00e5ff; --c-section-bg: rgba(255,46,204,0.14); --c-section-text: #ff2ecc; --c-section-border: #ff2ecc; --c-input-bg: #1b0a3d; --c-input-border: #4a2a8a; --c-th-bg: rgba(255,46,204,0.12); --c-th-text: #ffe600; --c-td-bg: #16093a; --c-td-text: #39ff14; --c-contact-border: #ff2ecc; --c-contact-hdr: rgba(255,46,204,0.14); --c-contact-hdr-text: #ffe600; --c-comment-th: rgba(255,46,204,0.12); --c-comment-td: #16093a; --c-btn-grad: linear-gradient(90deg,#ff2ecc,#00e5ff); --c-btn-text: #0a0024; --c-glow: rgba(255,46,204,0.35); --c-glow-sm: rgba(255,46,204,0.2); --c-scrollbar: #ff2ecc; --c-selection: rgba(255,46,204,0.25); --c-profile-url: rgba(57,255,20,.5); --c-online: #39ff14; --c-brand-start: #ff2ecc; --c-brand-end: #00e5ff; --plyr-color-main: #ff2ecc; --plyr-audio-controls-background:#1b0a3d; --plyr-audio-control-color:#39ff14; --plyr-audio-control-color-hover:#ff2ecc; } /* ── Vampire (Dracula) ── */ [data-theme="dracula"] { --c-bg: #282a36; --c-surface: #21222c; --c-card-bg: #343746; --c-card-border: #44475a; --c-text: #f8f8f2; --c-text-muted: #c4c6d6; --c-text-dim: rgba(248,248,242,.45); --c-link: #8be9fd; --c-link-hover: #bd93f9; --c-accent: #bd93f9; --c-accent2: #ff79c6; --c-accent-bg: rgba(189,147,249,0.14); --c-accent-border: rgba(189,147,249,0.34); --c-nav-bg: #1e1f29; --c-nav-border: #44475a; --c-nav-link: #c4c6d6; --c-nav-shadow: rgba(0,0,0,.5); --c-subnav-bg: rgba(189,147,249,0.09); --c-subnav-border: rgba(189,147,249,0.14); --c-subnav-link: #c4c6d6; --c-section-bg: rgba(189,147,249,0.14); --c-section-text: #bd93f9; --c-section-border: #bd93f9; --c-input-bg: #21222c; --c-input-border: #44475a; --c-th-bg: rgba(189,147,249,0.12); --c-th-text: #8be9fd; --c-td-bg: #343746; --c-td-text: #f8f8f2; --c-contact-border: #bd93f9; --c-contact-hdr: rgba(189,147,249,0.14); --c-contact-hdr-text: #8be9fd; --c-comment-th: rgba(189,147,249,0.12); --c-comment-td: #343746; --c-btn-grad: linear-gradient(90deg,#bd93f9,#ff79c6); --c-btn-text: #282a36; --c-glow: rgba(189,147,249,0.35); --c-glow-sm: rgba(189,147,249,0.2); --c-scrollbar: #bd93f9; --c-selection: rgba(189,147,249,0.25); --c-profile-url: rgba(248,248,242,.45); --c-online: #50fa7b; --c-brand-start: #bd93f9; --c-brand-end: #ff79c6; --plyr-color-main: #bd93f9; --plyr-audio-controls-background:#21222c; --plyr-audio-control-color:#f8f8f2; --plyr-audio-control-color-hover:#bd93f9; } /* ── Catppuccin (Mocha) ── */ [data-theme="catppuccin"] { --c-bg: #1e1e2e; --c-surface: #181825; --c-card-bg: #313244; --c-card-border: #45475a; --c-text: #cdd6f4; --c-text-muted: #a6adc8; --c-text-dim: rgba(205,214,244,.45); --c-link: #89b4fa; --c-link-hover: #94e2d5; --c-accent: #cba6f7; --c-accent2: #f5c2e7; --c-accent-bg: rgba(203,166,247,0.14); --c-accent-border: rgba(203,166,247,0.34); --c-nav-bg: #181825; --c-nav-border: #313244; --c-nav-link: #a6adc8; --c-nav-shadow: rgba(0,0,0,.5); --c-subnav-bg: rgba(203,166,247,0.09); --c-subnav-border: rgba(203,166,247,0.14); --c-subnav-link: #a6adc8; --c-section-bg: rgba(203,166,247,0.14); --c-section-text: #cba6f7; --c-section-border: #cba6f7; --c-input-bg: #181825; --c-input-border: #45475a; --c-th-bg: rgba(203,166,247,0.12); --c-th-text: #89b4fa; --c-td-bg: #313244; --c-td-text: #cdd6f4; --c-contact-border: #cba6f7; --c-contact-hdr: rgba(203,166,247,0.14); --c-contact-hdr-text: #89b4fa; --c-comment-th: rgba(203,166,247,0.12); --c-comment-td: #313244; --c-btn-grad: linear-gradient(90deg,#cba6f7,#f5c2e7); --c-btn-text: #1e1e2e; --c-glow: rgba(203,166,247,0.35); --c-glow-sm: rgba(203,166,247,0.2); --c-scrollbar: #cba6f7; --c-selection: rgba(203,166,247,0.25); --c-profile-url: rgba(205,214,244,.45); --c-online: #a6e3a1; --c-brand-start: #cba6f7; --c-brand-end: #f5c2e7; --plyr-color-main: #cba6f7; --plyr-audio-controls-background:#181825; --plyr-audio-control-color:#cdd6f4; --plyr-audio-control-color-hover:#cba6f7; } /* ── Nord ── */ [data-theme="nord"] { --c-bg: #2e3440; --c-surface: #3b4252; --c-card-bg: #3b4252; --c-card-border: #4c566a; --c-text: #eceff4; --c-text-muted: #d8dee9; --c-text-dim: rgba(216,222,233,.5); --c-link: #88c0d0; --c-link-hover: #8fbcbb; --c-accent: #88c0d0; --c-accent2: #81a1c1; --c-accent-bg: rgba(136,192,208,0.14); --c-accent-border: rgba(136,192,208,0.34); --c-nav-bg: #272c36; --c-nav-border: #4c566a; --c-nav-link: #d8dee9; --c-nav-shadow: rgba(0,0,0,.5); --c-subnav-bg: rgba(136,192,208,0.09); --c-subnav-border: rgba(136,192,208,0.14); --c-subnav-link: #d8dee9; --c-section-bg: rgba(136,192,208,0.14); --c-section-text: #88c0d0; --c-section-border: #88c0d0; --c-input-bg: #3b4252; --c-input-border: #4c566a; --c-th-bg: rgba(136,192,208,0.12); --c-th-text: #88c0d0; --c-td-bg: #3b4252; --c-td-text: #eceff4; --c-contact-border: #88c0d0; --c-contact-hdr: rgba(136,192,208,0.14); --c-contact-hdr-text: #88c0d0; --c-comment-th: rgba(136,192,208,0.12); --c-comment-td: #3b4252; --c-btn-grad: linear-gradient(90deg,#88c0d0,#81a1c1); --c-btn-text: #2e3440; --c-glow: rgba(136,192,208,0.35); --c-glow-sm: rgba(136,192,208,0.2); --c-scrollbar: #88c0d0; --c-selection: rgba(136,192,208,0.25); --c-profile-url: rgba(216,222,233,.5); --c-online: #a3be8c; --c-brand-start: #88c0d0; --c-brand-end: #81a1c1; --plyr-color-main: #88c0d0; --plyr-audio-controls-background:#3b4252; --plyr-audio-control-color:#eceff4; --plyr-audio-control-color-hover:#88c0d0; } /* ── Hotdog Stand (Win 3.1) ── */ [data-theme="hotdog"] { --c-bg: #ffff00; --c-surface: #ff0000; --c-card-bg: #ffff00; --c-card-border: #000000; --c-text: #000000; --c-text-muted: #000000; --c-text-dim: rgba(0,0,0,.6); --c-link: #000000; --c-link-hover: #ffffff; --c-accent: #ff0000; --c-accent2: #000000; --c-accent-bg: rgba(255,0,0,0.14); --c-accent-border: rgba(255,0,0,0.34); --c-nav-bg: #ff0000; --c-nav-border: #000000; --c-nav-link: #ffff00; --c-nav-shadow: rgba(0,0,0,.5); --c-subnav-bg: rgba(255,0,0,0.09); --c-subnav-border: rgba(255,0,0,0.14); --c-subnav-link: #000000; --c-section-bg: rgba(255,0,0,0.14); --c-section-text: #ff0000; --c-section-border: #ff0000; --c-input-bg: #ff0000; --c-input-border: #000000; --c-th-bg: rgba(255,0,0,0.12); --c-th-text: #000000; --c-td-bg: #ffff00; --c-td-text: #000000; --c-contact-border: #ff0000; --c-contact-hdr: rgba(255,0,0,0.14); --c-contact-hdr-text: #000000; --c-comment-th: rgba(255,0,0,0.12); --c-comment-td: #ffff00; --c-btn-grad: linear-gradient(90deg,#ff0000,#000000); --c-btn-text: #ffff00; --c-glow: rgba(255,0,0,0.35); --c-glow-sm: rgba(255,0,0,0.2); --c-scrollbar: #ff0000; --c-selection: rgba(255,0,0,0.25); --c-profile-url: rgba(0,0,0,.6); --c-online: #008000; --c-brand-start: #ff0000; --c-brand-end: #000000; --plyr-color-main: #ff0000; --plyr-audio-controls-background:#ff0000; --plyr-audio-control-color:#000000; --plyr-audio-control-color-hover:#ff0000; } /* ── High Contrast (Dark) ── */ [data-theme="hc-dark"] { --c-bg: #000000; --c-surface: #000000; --c-card-bg: #000000; --c-card-border: #ffffff; --c-text: #ffffff; --c-text-muted: #ffffff; --c-text-dim: #d0d0d0; --c-link: #ffff00; --c-link-hover: #00ffff; --c-accent: #ffff00; --c-accent2: #00ffff; --c-accent-bg: rgba(255,255,0,0.14); --c-accent-border: rgba(255,255,0,0.34); --c-nav-bg: #000000; --c-nav-border: #ffffff; --c-nav-link: #ffffff; --c-nav-shadow: rgba(0,0,0,.5); --c-subnav-bg: rgba(255,255,0,0.09); --c-subnav-border: rgba(255,255,0,0.14); --c-subnav-link: #ffffff; --c-section-bg: rgba(255,255,0,0.14); --c-section-text: #ffff00; --c-section-border: #ffff00; --c-input-bg: #000000; --c-input-border: #ffffff; --c-th-bg: rgba(255,255,0,0.12); --c-th-text: #ffff00; --c-td-bg: #000000; --c-td-text: #ffffff; --c-contact-border: #ffff00; --c-contact-hdr: rgba(255,255,0,0.14); --c-contact-hdr-text: #ffff00; --c-comment-th: rgba(255,255,0,0.12); --c-comment-td: #000000; --c-btn-grad: linear-gradient(90deg,#ffff00,#00ffff); --c-btn-text: #000000; --c-glow: rgba(255,255,0,0.35); --c-glow-sm: rgba(255,255,0,0.2); --c-scrollbar: #ffff00; --c-selection: rgba(255,255,0,0.25); --c-profile-url: #d0d0d0; --c-online: #00ff00; --c-brand-start: #ffff00; --c-brand-end: #00ffff; --plyr-color-main: #ffff00; --plyr-audio-controls-background:#000000; --plyr-audio-control-color:#ffffff; --plyr-audio-control-color-hover:#ffff00; } /* ── High Contrast (Light) ── */ [data-theme="hc-light"] { --c-bg: #ffffff; --c-surface: #ffffff; --c-card-bg: #ffffff; --c-card-border: #000000; --c-text: #000000; --c-text-muted: #000000; --c-text-dim: #303030; --c-link: #0000ee; --c-link-hover: #800080; --c-accent: #0000cc; --c-accent2: #008000; --c-accent-bg: rgba(0,0,204,0.14); --c-accent-border: rgba(0,0,204,0.34); --c-nav-bg: #000000; --c-nav-border: #000000; --c-nav-link: #ffffff; --c-nav-shadow: rgba(0,0,0,.5); --c-subnav-bg: rgba(0,0,204,0.09); --c-subnav-border: rgba(0,0,204,0.14); --c-subnav-link: #000000; --c-section-bg: rgba(0,0,204,0.14); --c-section-text: #0000cc; --c-section-border: #0000cc; --c-input-bg: #ffffff; --c-input-border: #000000; --c-th-bg: rgba(0,0,204,0.12); --c-th-text: #0000ee; --c-td-bg: #ffffff; --c-td-text: #000000; --c-contact-border: #0000cc; --c-contact-hdr: rgba(0,0,204,0.14); --c-contact-hdr-text: #0000ee; --c-comment-th: rgba(0,0,204,0.12); --c-comment-td: #ffffff; --c-btn-grad: linear-gradient(90deg,#0000cc,#008000); --c-btn-text: #ffffff; --c-glow: rgba(0,0,204,0.35); --c-glow-sm: rgba(0,0,204,0.2); --c-scrollbar: #0000cc; --c-selection: rgba(0,0,204,0.25); --c-profile-url: #303030; --c-online: #006600; --c-brand-start: #0000cc; --c-brand-end: #008000; --plyr-color-main: #0000cc; --plyr-audio-controls-background:#ffffff; --plyr-audio-control-color:#000000; --plyr-audio-control-color-hover:#0000cc; }