/* ============================================================= TMS Theme Variants Override color tokens via [data-tms-theme] on Default theme (cream/paper) is defined in tms-tokens.css ============================================================= */ /* ===== DARK MODE ===== */ [data-tms-theme="dark"] { --tms-color-bg-primary: #1a1714; --tms-color-bg-secondary: #252220; --tms-color-bg-tertiary: #302c28; --tms-color-bg-inverse: #f5f0e1; --tms-color-text-primary: #e8e2d4; --tms-color-text-secondary: #b8b0a0; --tms-color-text-muted: #7a7268; --tms-color-text-inverse: #1a1714; --tms-color-accent: #e8653a; --tms-color-accent-hover: #f07850; --tms-color-accent-light: #3a2520; --tms-color-border: #3d3832; --tms-color-border-strong: #5c554a; --tms-color-border-heavy: #8a8272; --tms-color-shadow: rgba(0, 0, 0, 0.3); --tms-color-focus: #e8653a; --tms-color-easy: #5cb86c; --tms-color-easy-bg: #1e3022; --tms-color-medium: #d4a017; --tms-color-medium-bg: #302a12; --tms-color-hard: #e8653a; --tms-color-hard-bg: #3a2520; } /* ===== OCEAN ===== */ [data-tms-theme="ocean"] { --tms-color-bg-primary: #e8f0f2; --tms-color-bg-secondary: #f0f7f9; --tms-color-bg-tertiary: #d5e3e8; --tms-color-bg-inverse: #1a2e38; --tms-color-text-primary: #1a2e38; --tms-color-text-secondary: #3a5a6a; --tms-color-text-muted: #6a8a9a; --tms-color-text-inverse: #e8f0f2; --tms-color-accent: #0077b6; --tms-color-accent-hover: #005f8a; --tms-color-accent-light: #c8e4f0; --tms-color-border: #a8c8d5; --tms-color-border-strong: #6a8a9a; --tms-color-border-heavy: #1a2e38; --tms-color-shadow: rgba(26, 46, 56, 0.12); --tms-color-focus: #0077b6; --tms-color-cat-diy: #0077b6; --tms-color-cat-life: #2856a3; --tms-color-cat-cooking: #2a9d8f; --tms-color-cat-creative: #5a4a9a; --tms-color-cat-fitness: #c4a020; --tms-color-cat-tech: #1a2e38; --tms-color-cat-social: #b05a9a; --tms-color-cat-outdoor: #3a8a7a; } /* ===== FOREST ===== */ [data-tms-theme="forest"] { --tms-color-bg-primary: #eae8e0; --tms-color-bg-secondary: #f2f0ea; --tms-color-bg-tertiary: #ddd8cc; --tms-color-bg-inverse: #1e2a1e; --tms-color-text-primary: #1e2a1e; --tms-color-text-secondary: #3a4a3a; --tms-color-text-muted: #6a7a6a; --tms-color-text-inverse: #eae8e0; --tms-color-accent: #2d6a4f; --tms-color-accent-hover: #1b4332; --tms-color-accent-light: #d8f0e0; --tms-color-border: #b0b8a8; --tms-color-border-strong: #6a7a6a; --tms-color-border-heavy: #1e2a1e; --tms-color-shadow: rgba(30, 42, 30, 0.12); --tms-color-focus: #2d6a4f; --tms-color-cat-diy: #8a5a2a; --tms-color-cat-life: #2856a3; --tms-color-cat-cooking: #2d6a4f; --tms-color-cat-creative: #6b4c9a; --tms-color-cat-fitness: #8a7a00; --tms-color-cat-tech: #1e2a1e; --tms-color-cat-social: #9a5a8a; --tms-color-cat-outdoor: #2d6a4f; } /* ===== SUNSET ===== */ [data-tms-theme="sunset"] { --tms-color-bg-primary: #f5ede0; --tms-color-bg-secondary: #faf5ec; --tms-color-bg-tertiary: #ebe0cc; --tms-color-bg-inverse: #2a1a1a; --tms-color-text-primary: #2a1a1a; --tms-color-text-secondary: #5a3a3a; --tms-color-text-muted: #8a6a6a; --tms-color-text-inverse: #f5ede0; --tms-color-accent: #d4451c; --tms-color-accent-hover: #b83815; --tms-color-accent-light: #f5d0c0; --tms-color-border: #c4a888; --tms-color-border-strong: #8a6a5a; --tms-color-border-heavy: #2a1a1a; --tms-color-shadow: rgba(42, 26, 26, 0.12); --tms-color-focus: #d4451c; --tms-color-cat-diy: #d4451c; --tms-color-cat-life: #3a6aa3; --tms-color-cat-cooking: #4a8a44; --tms-color-cat-creative: #8a4c9a; --tms-color-cat-fitness: #d4a017; --tms-color-cat-tech: #2a1a1a; --tms-color-cat-social: #d45a9a; --tms-color-cat-outdoor: #4a8a7a; } /* ===== THEME TRANSITION ===== */ html[data-tms-theme] { transition: background-color 0.3s ease, color 0.3s ease; } html[data-tms-theme] body, html[data-tms-theme] .tms-header, html[data-tms-theme] .tms-nav, html[data-tms-theme] .tms-footer, html[data-tms-theme] .tms-marquee, html[data-tms-theme] .tms-card, html[data-tms-theme] .tms-cat-card, html[data-tms-theme] .tms-tutorial-card, html[data-tms-theme] .tms-btn { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }