/* Theme Definitions for taiti_com_2 */
/* 21 themes: default + 20 design themes */

/* Default Theme (current dark theme) - no data attribute needed */
/* Already defined in style.css :root */

/* Theme 1: Minimalist Cafe */
[data-theme="minimalist-cafe"] {
  --font-body: "Cormorant Garamond", "Times New Roman", serif;
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-brand: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --body-bg: linear-gradient(135deg, #f5f5f0 0%, #e8e4dc 100%);
  --text: #2c2416;
  --muted: #5c5040;
  --accent: #8b7355;
  --accent-2: #6b5a47;
  --accent-3: #a08060;
  --line: #d4cfc5;
  --glow: rgba(139, 115, 85, 0.2);
  --brand-grad: linear-gradient(135deg, #8b7355, #6b5a47);
  --brand-mark-text: #f5f5f0;
  --brand-mark-shadow: 0 8px 24px rgba(44, 36, 22, 0.15);
  --hero-bg: rgba(255, 255, 255, 0.7);
  --hero-border-color: rgba(212, 207, 197, 0.8);
  --hero-shadow: 0 24px 60px rgba(44, 36, 22, 0.1);
  --input-bg: rgba(255, 255, 255, 0.9);
  --input-border-color: rgba(212, 207, 197, 0.9);
  --pill-bg: rgba(255, 255, 255, 0.6);
  --pill-border-color: #d4cfc5;
  --pill-selected-bg: rgba(139, 115, 85, 0.15);
  --pill-selected-border: rgba(139, 115, 85, 0.5);
  --pill-selected-shadow: 0 12px 24px rgba(44, 36, 22, 0.1);
  --button-bg: linear-gradient(135deg, #8b7355, #6b5a47);
  --button-text: #f5f5f0;
  --button-shadow: 0 10px 20px rgba(139, 115, 85, 0.25);
  --cta-bg: rgba(255, 255, 255, 0.6);
  --cta-border: #d4cfc5;
  --cta-text: #5c5040;
  --card-text: #2c2416;
  --card-muted: #5c5040;
}

/* Theme 2: Bold Brutalist */
[data-theme="bold-brutalist"] {
  --font-body: "Archivo Black", "Arial Black", sans-serif;
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-brand: "Archivo Black", "Arial Black", sans-serif;
  --body-bg: #000000;
  --text: #ffffff;
  --muted: #b0b0b0;
  --accent: #ffffff;
  --accent-2: #cccccc;
  --accent-3: #888888;
  --line: #333333;
  --glow: rgba(255, 255, 255, 0.15);
  --brand-grad: linear-gradient(135deg, #ffffff, #cccccc);
  --brand-mark-text: #000000;
  --brand-mark-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
  --hero-bg: rgba(20, 20, 20, 0.9);
  --hero-border-color: rgba(51, 51, 51, 0.8);
  --hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.8);
  --input-bg: rgba(30, 30, 30, 0.9);
  --input-border-color: rgba(51, 51, 51, 0.9);
  --pill-bg: rgba(30, 30, 30, 0.8);
  --pill-border-color: #333333;
  --pill-selected-bg: rgba(255, 255, 255, 0.15);
  --pill-selected-border: rgba(255, 255, 255, 0.5);
  --pill-selected-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
  --button-bg: #ffffff;
  --button-text: #000000;
  --button-shadow: 0 10px 20px rgba(255, 255, 255, 0.15);
  --cta-bg: rgba(30, 30, 30, 0.8);
  --cta-border: #333333;
  --cta-text: #b0b0b0;
}

/* Theme 3: Organic Nature */
[data-theme="organic-nature"] {
  --font-body: "Fraunces", "Georgia", serif;
  --font-display: "Fraunces", "Georgia", serif;
  --font-brand: "Crimson Pro", "Georgia", serif;
  --body-bg: linear-gradient(135deg, #a8d5ba 0%, #7cb799 100%);
  --text: #1a4731;
  --muted: #2d5a42;
  --accent: #1a4731;
  --accent-2: #2d5a42;
  --accent-3: #4a7c59;
  --line: rgba(26, 71, 49, 0.2);
  --glow: rgba(26, 71, 49, 0.2);
  --brand-grad: linear-gradient(135deg, #1a4731, #2d5a42);
  --brand-mark-text: #a8d5ba;
  --brand-mark-shadow: 0 8px 24px rgba(26, 71, 49, 0.3);
  --hero-bg: rgba(255, 255, 255, 0.5);
  --hero-border-color: rgba(26, 71, 49, 0.2);
  --hero-shadow: 0 24px 60px rgba(26, 71, 49, 0.15);
  --input-bg: rgba(255, 255, 255, 0.7);
  --input-border-color: rgba(26, 71, 49, 0.25);
  --pill-bg: rgba(255, 255, 255, 0.4);
  --pill-border-color: rgba(26, 71, 49, 0.2);
  --pill-selected-bg: rgba(26, 71, 49, 0.15);
  --pill-selected-border: rgba(26, 71, 49, 0.5);
  --pill-selected-shadow: 0 12px 24px rgba(26, 71, 49, 0.15);
  --button-bg: linear-gradient(135deg, #1a4731, #2d5a42);
  --button-text: #a8d5ba;
  --button-shadow: 0 10px 20px rgba(26, 71, 49, 0.3);
  --cta-bg: rgba(255, 255, 255, 0.4);
  --cta-border: rgba(26, 71, 49, 0.2);
  --cta-text: #2d5a42;
  --card-text: #e8f5e9;
  --card-muted: #b8d4bc;
}

/* Theme 4: Neon Cyberpunk */
[data-theme="neon-cyberpunk"] {
  --font-body: "Space Mono", "Courier New", monospace;
  --font-display: "Space Mono", "Courier New", monospace;
  --font-brand: "Space Mono", "Courier New", monospace;
  --body-bg: linear-gradient(135deg, #0a0e27 0%, #0f1535 100%);
  --text: #00ffff;
  --muted: #00b8b8;
  --accent: #00ffff;
  --accent-2: #ff00ff;
  --accent-3: #ffff00;
  --line: rgba(0, 255, 255, 0.2);
  --glow: rgba(0, 255, 255, 0.4);
  --brand-grad: linear-gradient(135deg, #00ffff, #ff00ff);
  --brand-mark-text: #0a0e27;
  --brand-mark-shadow: 0 8px 24px rgba(0, 255, 255, 0.4);
  --hero-bg: rgba(10, 14, 39, 0.9);
  --hero-border-color: rgba(0, 255, 255, 0.3);
  --hero-shadow: 0 24px 60px rgba(0, 255, 255, 0.2);
  --input-bg: rgba(10, 14, 39, 0.95);
  --input-border-color: rgba(0, 255, 255, 0.4);
  --pill-bg: rgba(10, 14, 39, 0.8);
  --pill-border-color: rgba(0, 255, 255, 0.3);
  --pill-selected-bg: rgba(0, 255, 255, 0.15);
  --pill-selected-border: rgba(0, 255, 255, 0.6);
  --pill-selected-shadow: 0 12px 24px rgba(0, 255, 255, 0.3);
  --button-bg: linear-gradient(135deg, #00ffff, #ff00ff);
  --button-text: #0a0e27;
  --button-shadow: 0 10px 20px rgba(0, 255, 255, 0.4);
  --cta-bg: rgba(10, 14, 39, 0.8);
  --cta-border: rgba(0, 255, 255, 0.3);
  --cta-text: #00b8b8;
}

/* Theme 5: Soft Pastel */
[data-theme="soft-pastel"] {
  --font-body: "Nunito", "Helvetica Neue", sans-serif;
  --font-display: "Nunito", "Helvetica Neue", sans-serif;
  --font-brand: "Nunito", "Helvetica Neue", sans-serif;
  --body-bg: linear-gradient(135deg, #ffd6e8 0%, #c3b5e8 100%);
  --text: #5a4b6b;
  --muted: #7a6b8b;
  --accent: #e87da0;
  --accent-2: #a088c8;
  --accent-3: #6bc5d2;
  --line: rgba(90, 75, 107, 0.2);
  --glow: rgba(232, 125, 160, 0.3);
  --brand-grad: linear-gradient(135deg, #e87da0, #a088c8);
  --brand-mark-text: #ffffff;
  --brand-mark-shadow: 0 8px 24px rgba(90, 75, 107, 0.2);
  --hero-bg: rgba(255, 255, 255, 0.6);
  --hero-border-color: rgba(90, 75, 107, 0.15);
  --hero-shadow: 0 24px 60px rgba(90, 75, 107, 0.1);
  --input-bg: rgba(255, 255, 255, 0.8);
  --input-border-color: rgba(90, 75, 107, 0.2);
  --pill-bg: rgba(255, 255, 255, 0.5);
  --pill-border-color: rgba(90, 75, 107, 0.15);
  --pill-selected-bg: rgba(232, 125, 160, 0.2);
  --pill-selected-border: rgba(232, 125, 160, 0.5);
  --pill-selected-shadow: 0 12px 24px rgba(90, 75, 107, 0.1);
  --button-bg: linear-gradient(135deg, #e87da0, #a088c8);
  --button-text: #ffffff;
  --button-shadow: 0 10px 20px rgba(232, 125, 160, 0.35);
  --cta-bg: rgba(255, 255, 255, 0.5);
  --cta-border: rgba(90, 75, 107, 0.15);
  --cta-text: #7a6b8b;
  --card-text: #5a4b6b;
  --card-muted: #7a6b8b;
}

/* Theme 6: Industrial Grunge */
[data-theme="industrial-grunge"] {
  --font-body: "Bebas Neue", "Arial Black", sans-serif;
  --font-display: "Bebas Neue", "Arial Black", sans-serif;
  --font-brand: "Bebas Neue", "Arial Black", sans-serif;
  --body-bg: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
  --text: #e8e8e8;
  --muted: #a0a0a0;
  --accent: #ff6b35;
  --accent-2: #e85a25;
  --accent-3: #ff8c5a;
  --line: rgba(255, 107, 53, 0.2);
  --glow: rgba(255, 107, 53, 0.3);
  --brand-grad: linear-gradient(135deg, #ff6b35, #e85a25);
  --brand-mark-text: #1a1a1a;
  --brand-mark-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  --hero-bg: rgba(26, 26, 26, 0.95);
  --hero-border-color: rgba(255, 107, 53, 0.3);
  --hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  --input-bg: rgba(20, 20, 20, 0.95);
  --input-border-color: rgba(255, 107, 53, 0.3);
  --pill-bg: rgba(30, 30, 30, 0.9);
  --pill-border-color: rgba(255, 107, 53, 0.2);
  --pill-selected-bg: rgba(255, 107, 53, 0.2);
  --pill-selected-border: rgba(255, 107, 53, 0.6);
  --pill-selected-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
  --button-bg: linear-gradient(135deg, #ff6b35, #e85a25);
  --button-text: #1a1a1a;
  --button-shadow: 0 10px 20px rgba(255, 107, 53, 0.35);
  --cta-bg: rgba(30, 30, 30, 0.9);
  --cta-border: rgba(255, 107, 53, 0.2);
  --cta-text: #a0a0a0;
}

/* Theme 7: Elegant Luxury */
[data-theme="elegant-luxury"] {
  --font-body: "Playfair Display", "Georgia", serif;
  --font-display: "Playfair Display", "Georgia", serif;
  --font-brand: "DM Sans", "Helvetica Neue", sans-serif;
  --body-bg: linear-gradient(135deg, #1a1a1a 0%, #2d2424 100%);
  --text: #d4af37;
  --muted: #a89050;
  --accent: #d4af37;
  --accent-2: #c9a22e;
  --accent-3: #e0c050;
  --line: rgba(212, 175, 55, 0.2);
  --glow: rgba(212, 175, 55, 0.3);
  --brand-grad: linear-gradient(135deg, #d4af37, #c9a22e);
  --brand-mark-text: #1a1a1a;
  --brand-mark-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  --hero-bg: rgba(30, 30, 30, 0.9);
  --hero-border-color: rgba(212, 175, 55, 0.3);
  --hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  --input-bg: rgba(20, 20, 20, 0.9);
  --input-border-color: rgba(212, 175, 55, 0.3);
  --pill-bg: rgba(30, 30, 30, 0.8);
  --pill-border-color: rgba(212, 175, 55, 0.2);
  --pill-selected-bg: rgba(212, 175, 55, 0.15);
  --pill-selected-border: rgba(212, 175, 55, 0.5);
  --pill-selected-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
  --button-bg: linear-gradient(135deg, #d4af37, #c9a22e);
  --button-text: #1a1a1a;
  --button-shadow: 0 10px 20px rgba(212, 175, 55, 0.35);
  --cta-bg: rgba(30, 30, 30, 0.8);
  --cta-border: rgba(212, 175, 55, 0.2);
  --cta-text: #a89050;
}

/* Theme 8: Playful Handwritten */
[data-theme="playful-handwritten"] {
  --font-body: "Amatic SC", "Comic Sans MS", cursive;
  --font-display: "Amatic SC", "Comic Sans MS", cursive;
  --font-brand: "Amatic SC", "Comic Sans MS", cursive;
  --body-bg: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 100%);
  --text: #ff6b6b;
  --muted: #d95858;
  --accent: #ff6b6b;
  --accent-2: #ffc078;
  --accent-3: #74c0fc;
  --line: rgba(255, 107, 107, 0.2);
  --glow: rgba(255, 107, 107, 0.25);
  --brand-grad: linear-gradient(135deg, #ff6b6b, #ffc078);
  --brand-mark-text: #fff4e6;
  --brand-mark-shadow: 0 8px 24px rgba(255, 107, 107, 0.3);
  --hero-bg: rgba(255, 255, 255, 0.7);
  --hero-border-color: rgba(255, 107, 107, 0.2);
  --hero-shadow: 0 24px 60px rgba(255, 107, 107, 0.15);
  --input-bg: rgba(255, 255, 255, 0.9);
  --input-border-color: rgba(255, 107, 107, 0.25);
  --pill-bg: rgba(255, 255, 255, 0.6);
  --pill-border-color: rgba(255, 107, 107, 0.2);
  --pill-selected-bg: rgba(255, 107, 107, 0.15);
  --pill-selected-border: rgba(255, 107, 107, 0.5);
  --pill-selected-shadow: 0 12px 24px rgba(255, 107, 107, 0.15);
  --button-bg: linear-gradient(135deg, #ff6b6b, #ffc078);
  --button-text: #fff4e6;
  --button-shadow: 0 10px 20px rgba(255, 107, 107, 0.35);
  --cta-bg: rgba(255, 255, 255, 0.6);
  --cta-border: rgba(255, 107, 107, 0.2);
  --cta-text: #d95858;
  --card-text: #ff6b6b;
  --card-muted: #d95858;
}

/* Theme 9: Tech Startup */
[data-theme="tech-startup"] {
  --font-body: "Lexend", "Helvetica Neue", sans-serif;
  --font-display: "Lexend", "Helvetica Neue", sans-serif;
  --font-brand: "Lexend", "Helvetica Neue", sans-serif;
  --body-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.8);
  --accent: #ffffff;
  --accent-2: #ffd6e8;
  --accent-3: #c3f0ff;
  --line: rgba(255, 255, 255, 0.2);
  --glow: rgba(255, 255, 255, 0.3);
  --brand-grad: linear-gradient(135deg, #ffffff, #ffd6e8);
  --brand-mark-text: #667eea;
  --brand-mark-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  --hero-bg: rgba(255, 255, 255, 0.15);
  --hero-border-color: rgba(255, 255, 255, 0.25);
  --hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  --input-bg: rgba(255, 255, 255, 0.2);
  --input-border-color: rgba(255, 255, 255, 0.3);
  --pill-bg: rgba(255, 255, 255, 0.1);
  --pill-border-color: rgba(255, 255, 255, 0.2);
  --pill-selected-bg: rgba(255, 255, 255, 0.25);
  --pill-selected-border: rgba(255, 255, 255, 0.5);
  --pill-selected-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  --button-bg: #ffffff;
  --button-text: #667eea;
  --button-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  --cta-bg: rgba(255, 255, 255, 0.1);
  --cta-border: rgba(255, 255, 255, 0.2);
  --cta-text: rgba(255, 255, 255, 0.8);
}

/* Theme 10: Retro 80s */
[data-theme="retro-80s"] {
  --font-body: "Righteous", "Impact", sans-serif;
  --font-display: "Righteous", "Impact", sans-serif;
  --font-brand: "Righteous", "Impact", sans-serif;
  --body-bg: linear-gradient(135deg, #ff0080 0%, #7928ca 50%, #ff0080 100%);
  --text: #00ffff;
  --muted: #80ffff;
  --accent: #00ffff;
  --accent-2: #ff0080;
  --accent-3: #ffff00;
  --line: rgba(0, 255, 255, 0.3);
  --glow: rgba(0, 255, 255, 0.4);
  --brand-grad: linear-gradient(135deg, #00ffff, #ffff00);
  --brand-mark-text: #7928ca;
  --brand-mark-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --hero-bg: rgba(0, 0, 0, 0.3);
  --hero-border-color: rgba(0, 255, 255, 0.4);
  --hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  --input-bg: rgba(0, 0, 0, 0.4);
  --input-border-color: rgba(0, 255, 255, 0.5);
  --pill-bg: rgba(0, 0, 0, 0.3);
  --pill-border-color: rgba(0, 255, 255, 0.3);
  --pill-selected-bg: rgba(0, 255, 255, 0.2);
  --pill-selected-border: rgba(0, 255, 255, 0.7);
  --pill-selected-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
  --button-bg: linear-gradient(135deg, #00ffff, #ffff00);
  --button-text: #7928ca;
  --button-shadow: 0 10px 20px rgba(0, 255, 255, 0.4);
  --cta-bg: rgba(0, 0, 0, 0.3);
  --cta-border: rgba(0, 255, 255, 0.3);
  --cta-text: #80ffff;
}

/* Theme 11: Japanese Zen */
[data-theme="japanese-zen"] {
  --font-body: "Crimson Pro", "Georgia", serif;
  --font-display: "Crimson Pro", "Georgia", serif;
  --font-brand: "Crimson Pro", "Georgia", serif;
  --body-bg: linear-gradient(135deg, #f8f5f1 0%, #e8dfd6 100%);
  --text: #2c2416;
  --muted: #5c5040;
  --accent: #c44536;
  --accent-2: #8b7355;
  --accent-3: #2c2416;
  --line: rgba(44, 36, 22, 0.15);
  --glow: rgba(196, 69, 54, 0.2);
  --brand-grad: linear-gradient(135deg, #c44536, #8b7355);
  --brand-mark-text: #f8f5f1;
  --brand-mark-shadow: 0 8px 24px rgba(44, 36, 22, 0.2);
  --hero-bg: rgba(255, 255, 255, 0.6);
  --hero-border-color: rgba(44, 36, 22, 0.1);
  --hero-shadow: 0 24px 60px rgba(44, 36, 22, 0.08);
  --input-bg: rgba(255, 255, 255, 0.8);
  --input-border-color: rgba(44, 36, 22, 0.15);
  --pill-bg: rgba(255, 255, 255, 0.5);
  --pill-border-color: rgba(44, 36, 22, 0.1);
  --pill-selected-bg: rgba(196, 69, 54, 0.1);
  --pill-selected-border: rgba(196, 69, 54, 0.4);
  --pill-selected-shadow: 0 12px 24px rgba(44, 36, 22, 0.08);
  --button-bg: linear-gradient(135deg, #c44536, #a03828);
  --button-text: #f8f5f1;
  --button-shadow: 0 10px 20px rgba(196, 69, 54, 0.25);
  --cta-bg: rgba(255, 255, 255, 0.5);
  --cta-border: rgba(44, 36, 22, 0.1);
  --cta-text: #5c5040;
  --card-text: #2c2416;
  --card-muted: #5c5040;
}

/* Theme 12: Magazine Editorial */
[data-theme="magazine-editorial"] {
  --font-body: "Merriweather", "Georgia", serif;
  --font-display: "Abril Fatface", "Georgia", serif;
  --font-brand: "Abril Fatface", "Georgia", serif;
  --body-bg: #ffffff;
  --text: #000000;
  --muted: #555555;
  --accent: #000000;
  --accent-2: #333333;
  --accent-3: #777777;
  --line: #e0e0e0;
  --glow: rgba(0, 0, 0, 0.1);
  --brand-grad: linear-gradient(135deg, #000000, #333333);
  --brand-mark-text: #ffffff;
  --brand-mark-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  --hero-bg: rgba(250, 250, 250, 0.9);
  --hero-border-color: #e0e0e0;
  --hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
  --input-bg: rgba(255, 255, 255, 0.9);
  --input-border-color: #e0e0e0;
  --pill-bg: rgba(250, 250, 250, 0.8);
  --pill-border-color: #e0e0e0;
  --pill-selected-bg: rgba(0, 0, 0, 0.05);
  --pill-selected-border: #000000;
  --pill-selected-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  --button-bg: #000000;
  --button-text: #ffffff;
  --button-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  --cta-bg: rgba(250, 250, 250, 0.8);
  --cta-border: #e0e0e0;
  --cta-text: #555555;
  --card-text: #000000;
  --card-muted: #555555;
}

/* Theme 13: Dark Mode Premium */
[data-theme="dark-mode-premium"] {
  --font-body: "Syne", "Helvetica Neue", sans-serif;
  --font-display: "Syne", "Helvetica Neue", sans-serif;
  --font-brand: "Syne", "Helvetica Neue", sans-serif;
  --body-bg: linear-gradient(135deg, #1e1e1e 0%, #0f0f0f 100%);
  --text: #f0f0f0;
  --muted: #888888;
  --accent: #ffffff;
  --accent-2: #cccccc;
  --accent-3: #999999;
  --line: #333333;
  --glow: rgba(255, 255, 255, 0.1);
  --brand-grad: linear-gradient(135deg, #ffffff, #888888);
  --brand-mark-text: #0f0f0f;
  --brand-mark-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  --hero-bg: rgba(30, 30, 30, 0.9);
  --hero-border-color: rgba(51, 51, 51, 0.8);
  --hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --input-bg: rgba(15, 15, 15, 0.9);
  --input-border-color: rgba(51, 51, 51, 0.9);
  --pill-bg: rgba(30, 30, 30, 0.8);
  --pill-border-color: #333333;
  --pill-selected-bg: rgba(255, 255, 255, 0.1);
  --pill-selected-border: rgba(255, 255, 255, 0.4);
  --pill-selected-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
  --button-bg: linear-gradient(135deg, #ffffff, #cccccc);
  --button-text: #0f0f0f;
  --button-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
  --cta-bg: rgba(30, 30, 30, 0.8);
  --cta-border: #333333;
  --cta-text: #888888;
}

/* Theme 14: Geometric Abstract */
[data-theme="geometric-abstract"] {
  --font-body: "Unbounded", "Helvetica Neue", sans-serif;
  --font-display: "Unbounded", "Helvetica Neue", sans-serif;
  --font-brand: "Unbounded", "Helvetica Neue", sans-serif;
  --body-bg: #f5f5f5;
  --text: #ff5722;
  --muted: #666666;
  --accent: #ff5722;
  --accent-2: #2196f3;
  --accent-3: #4caf50;
  --line: #e0e0e0;
  --glow: rgba(255, 87, 34, 0.2);
  --brand-grad: linear-gradient(135deg, #ff5722, #2196f3);
  --brand-mark-text: #ffffff;
  --brand-mark-shadow: 0 8px 24px rgba(255, 87, 34, 0.3);
  --hero-bg: rgba(255, 255, 255, 0.9);
  --hero-border-color: #e0e0e0;
  --hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
  --input-bg: rgba(255, 255, 255, 0.95);
  --input-border-color: #e0e0e0;
  --pill-bg: rgba(255, 255, 255, 0.8);
  --pill-border-color: #e0e0e0;
  --pill-selected-bg: rgba(255, 87, 34, 0.1);
  --pill-selected-border: rgba(255, 87, 34, 0.5);
  --pill-selected-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  --button-bg: linear-gradient(135deg, #ff5722, #e64a19);
  --button-text: #ffffff;
  --button-shadow: 0 10px 20px rgba(255, 87, 34, 0.3);
  --cta-bg: rgba(255, 255, 255, 0.8);
  --cta-border: #e0e0e0;
  --cta-text: #666666;
  --card-text: #ff5722;
  --card-muted: #666666;
}

/* Theme 15: Vintage Poster */
[data-theme="vintage-poster"] {
  --font-body: "Merriweather", "Georgia", serif;
  --font-display: "Staatliches", "Impact", sans-serif;
  --font-brand: "Staatliches", "Impact", sans-serif;
  --body-bg: linear-gradient(135deg, #f4e5d3 0%, #d9c4a8 100%);
  --text: #8b4513;
  --muted: #a06030;
  --accent: #8b4513;
  --accent-2: #a06030;
  --accent-3: #c08050;
  --line: rgba(139, 69, 19, 0.2);
  --glow: rgba(139, 69, 19, 0.2);
  --brand-grad: linear-gradient(135deg, #8b4513, #a06030);
  --brand-mark-text: #f4e5d3;
  --brand-mark-shadow: 0 8px 24px rgba(139, 69, 19, 0.25);
  --hero-bg: rgba(255, 255, 255, 0.6);
  --hero-border-color: rgba(139, 69, 19, 0.2);
  --hero-shadow: 0 24px 60px rgba(139, 69, 19, 0.1);
  --input-bg: rgba(255, 255, 255, 0.8);
  --input-border-color: rgba(139, 69, 19, 0.25);
  --pill-bg: rgba(255, 255, 255, 0.5);
  --pill-border-color: rgba(139, 69, 19, 0.2);
  --pill-selected-bg: rgba(139, 69, 19, 0.15);
  --pill-selected-border: rgba(139, 69, 19, 0.5);
  --pill-selected-shadow: 0 12px 24px rgba(139, 69, 19, 0.1);
  --button-bg: linear-gradient(135deg, #8b4513, #a06030);
  --button-text: #f4e5d3;
  --button-shadow: 0 10px 20px rgba(139, 69, 19, 0.3);
  --cta-bg: rgba(255, 255, 255, 0.5);
  --cta-border: rgba(139, 69, 19, 0.2);
  --cta-text: #a06030;
  --card-text: #8b4513;
  --card-muted: #a06030;
}

/* Theme 16: Futuristic Glass */
[data-theme="futuristic-glass"] {
  --font-body: "JetBrains Mono", "Courier New", monospace;
  --font-display: "JetBrains Mono", "Courier New", monospace;
  --font-brand: "JetBrains Mono", "Courier New", monospace;
  --body-bg: linear-gradient(135deg, #1a1a2e 0%, #0f0f1e 100%);
  --text: #ffffff;
  --muted: #a0a0c0;
  --accent: #6366f1;
  --accent-2: #8b5cf6;
  --accent-3: #06b6d4;
  --line: rgba(99, 102, 241, 0.2);
  --glow: rgba(99, 102, 241, 0.3);
  --brand-grad: linear-gradient(135deg, #6366f1, #8b5cf6);
  --brand-mark-text: #0f0f1e;
  --brand-mark-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
  --hero-bg: rgba(255, 255, 255, 0.05);
  --hero-border-color: rgba(255, 255, 255, 0.1);
  --hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  --input-bg: rgba(255, 255, 255, 0.08);
  --input-border-color: rgba(255, 255, 255, 0.15);
  --pill-bg: rgba(255, 255, 255, 0.05);
  --pill-border-color: rgba(255, 255, 255, 0.1);
  --pill-selected-bg: rgba(99, 102, 241, 0.2);
  --pill-selected-border: rgba(99, 102, 241, 0.5);
  --pill-selected-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  --button-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
  --button-text: #ffffff;
  --button-shadow: 0 10px 20px rgba(99, 102, 241, 0.4);
  --cta-bg: rgba(255, 255, 255, 0.05);
  --cta-border: rgba(255, 255, 255, 0.1);
  --cta-text: #a0a0c0;
}

/* Theme 17: Scandinavian Clean */
[data-theme="scandinavian-clean"] {
  --font-body: "Raleway", "Helvetica Neue", sans-serif;
  --font-display: "Raleway", "Helvetica Neue", sans-serif;
  --font-brand: "Raleway", "Helvetica Neue", sans-serif;
  --body-bg: #fafafa;
  --text: #333333;
  --muted: #666666;
  --accent: #333333;
  --accent-2: #555555;
  --accent-3: #888888;
  --line: #e8e8e8;
  --glow: rgba(51, 51, 51, 0.1);
  --brand-grad: linear-gradient(135deg, #333333, #555555);
  --brand-mark-text: #fafafa;
  --brand-mark-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  --hero-bg: rgba(255, 255, 255, 0.9);
  --hero-border-color: #e8e8e8;
  --hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.05);
  --input-bg: #ffffff;
  --input-border-color: #e8e8e8;
  --pill-bg: rgba(255, 255, 255, 0.8);
  --pill-border-color: #e8e8e8;
  --pill-selected-bg: rgba(51, 51, 51, 0.08);
  --pill-selected-border: #333333;
  --pill-selected-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
  --button-bg: #333333;
  --button-text: #fafafa;
  --button-shadow: 0 10px 20px rgba(51, 51, 51, 0.2);
  --cta-bg: rgba(255, 255, 255, 0.8);
  --cta-border: #e8e8e8;
  --cta-text: #666666;
  --card-text: #333333;
  --card-muted: #666666;
}

/* Theme 18: Art Deco */
[data-theme="art-deco"] {
  --font-body: "Playfair Display", "Georgia", serif;
  --font-display: "Playfair Display", "Georgia", serif;
  --font-brand: "Playfair Display", "Georgia", serif;
  --body-bg: linear-gradient(135deg, #1a1a1a 0%, #2d2424 100%);
  --text: #d4af37;
  --muted: #a89050;
  --accent: #d4af37;
  --accent-2: #c9a22e;
  --accent-3: #e0c050;
  --line: rgba(212, 175, 55, 0.2);
  --glow: rgba(212, 175, 55, 0.3);
  --brand-grad: linear-gradient(135deg, #d4af37, #e0c050);
  --brand-mark-text: #1a1a1a;
  --brand-mark-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  --hero-bg: rgba(26, 26, 26, 0.95);
  --hero-border-color: rgba(212, 175, 55, 0.3);
  --hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  --input-bg: rgba(20, 20, 20, 0.95);
  --input-border-color: rgba(212, 175, 55, 0.3);
  --pill-bg: rgba(26, 26, 26, 0.9);
  --pill-border-color: rgba(212, 175, 55, 0.2);
  --pill-selected-bg: rgba(212, 175, 55, 0.15);
  --pill-selected-border: rgba(212, 175, 55, 0.6);
  --pill-selected-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
  --button-bg: linear-gradient(135deg, #d4af37, #e0c050);
  --button-text: #1a1a1a;
  --button-shadow: 0 10px 20px rgba(212, 175, 55, 0.35);
  --cta-bg: rgba(26, 26, 26, 0.9);
  --cta-border: rgba(212, 175, 55, 0.2);
  --cta-text: #a89050;
}

/* Theme 19: Neon Pop */
[data-theme="neon-pop"] {
  --font-body: "Nunito", "Helvetica Neue", sans-serif;
  --font-display: "Nunito", "Helvetica Neue", sans-serif;
  --font-brand: "Nunito", "Helvetica Neue", sans-serif;
  --body-bg: linear-gradient(135deg, #ff006e 0%, #8338ec 50%, #3a86ff 100%);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.85);
  --accent: #ffffff;
  --accent-2: #ffff00;
  --accent-3: #00ff00;
  --line: rgba(255, 255, 255, 0.25);
  --glow: rgba(255, 255, 255, 0.35);
  --brand-grad: linear-gradient(135deg, #ffffff, #ffff00);
  --brand-mark-text: #8338ec;
  --brand-mark-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --hero-bg: rgba(0, 0, 0, 0.25);
  --hero-border-color: rgba(255, 255, 255, 0.3);
  --hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  --input-bg: rgba(0, 0, 0, 0.3);
  --input-border-color: rgba(255, 255, 255, 0.35);
  --pill-bg: rgba(0, 0, 0, 0.2);
  --pill-border-color: rgba(255, 255, 255, 0.25);
  --pill-selected-bg: rgba(255, 255, 255, 0.2);
  --pill-selected-border: rgba(255, 255, 255, 0.6);
  --pill-selected-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  --button-bg: #ffffff;
  --button-text: #8338ec;
  --button-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  --cta-bg: rgba(0, 0, 0, 0.2);
  --cta-border: rgba(255, 255, 255, 0.25);
  --cta-text: rgba(255, 255, 255, 0.85);
}

/* Theme 20: Minimalist Swiss */
[data-theme="minimalist-swiss"] {
  --font-body: "DM Sans", "Helvetica Neue", sans-serif;
  --font-display: "DM Sans", "Helvetica Neue", sans-serif;
  --font-brand: "DM Sans", "Helvetica Neue", sans-serif;
  --body-bg: #ffffff;
  --text: #000000;
  --muted: #666666;
  --accent: #ff0000;
  --accent-2: #000000;
  --accent-3: #333333;
  --line: #e0e0e0;
  --glow: rgba(255, 0, 0, 0.15);
  --brand-grad: linear-gradient(135deg, #ff0000, #cc0000);
  --brand-mark-text: #ffffff;
  --brand-mark-shadow: 0 8px 24px rgba(255, 0, 0, 0.25);
  --hero-bg: rgba(250, 250, 250, 0.9);
  --hero-border-color: #e0e0e0;
  --hero-shadow: 0 24px 60px rgba(0, 0, 0, 0.06);
  --input-bg: #ffffff;
  --input-border-color: #e0e0e0;
  --pill-bg: rgba(250, 250, 250, 0.9);
  --pill-border-color: #e0e0e0;
  --pill-selected-bg: rgba(255, 0, 0, 0.08);
  --pill-selected-border: #ff0000;
  --pill-selected-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
  --button-bg: #ff0000;
  --button-text: #ffffff;
  --button-shadow: 0 10px 20px rgba(255, 0, 0, 0.25);
  --cta-bg: rgba(250, 250, 250, 0.9);
  --cta-border: #e0e0e0;
  --cta-text: #666666;
  --card-text: #000000;
  --card-muted: #666666;
}

/* Theme: Deep Ocean（旧Default） */
[data-theme="deep-ocean"] {
  --font-body: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-brand: "Unbounded", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body-bg: radial-gradient(900px 600px at 20% 10%, rgba(124, 211, 198, 0.18), transparent 60%),
    radial-gradient(700px 500px at 80% 0%, rgba(154, 168, 255, 0.16), transparent 55%),
    linear-gradient(160deg, #0b0f14 0%, #0f1620 50%, #0d141e 100%);
  --text: #e8eef7;
  --muted: #a5b4c6;
  --accent: #7cd3c6;
  --accent-2: #9aa8ff;
  --accent-3: #f7b267;
  --line: #233146;
  --glow: rgba(124, 211, 198, 0.25);
  --brand-grad: linear-gradient(135deg, rgba(124, 211, 198, 0.9), rgba(154, 168, 255, 0.9));
  --brand-mark-text: #081018;
  --brand-mark-shadow: 0 8px 24px rgba(9, 12, 18, 0.5);
  --hero-bg: linear-gradient(160deg, rgba(18, 27, 39, 0.9), rgba(23, 34, 51, 0.9));
  --hero-border-color: rgba(35, 49, 70, 0.8);
  --hero-shadow: 0 24px 60px rgba(5, 8, 14, 0.6);
  --input-bg: rgba(7, 11, 18, 0.7);
  --input-border-color: rgba(35, 49, 70, 0.9);
  --pill-bg: rgba(12, 18, 28, 0.6);
  --pill-border-color: #233146;
  --pill-selected-bg: rgba(124, 211, 198, 0.16);
  --pill-selected-border: rgba(124, 211, 198, 0.4);
  --pill-selected-shadow: 0 12px 24px rgba(10, 20, 28, 0.4);
  --button-bg: linear-gradient(135deg, var(--accent), var(--accent-2));
  --button-text: #0b1016;
  --button-shadow: 0 10px 20px var(--glow);
  --cta-bg: rgba(18, 27, 39, 0.6);
  --cta-border: #233146;
  --cta-text: #a5b4c6;
  --card-bg: rgba(17, 27, 39, 0.75);
  --card-text: var(--text);
  --card-muted: var(--muted);
}

/* Theme transition effect */
html {
  transition: background 0.4s ease;
}

body,
.hero,
.hero-title,
.hero-subtitle,
.brand-mark,
.brand-name,
.brand-tagline,
.engine-pill,
.search-field,
.search-field input,
.search-field textarea,
.search-field button,
.cta-quiet,
.feed-card,
.tool-card,
.tools-hero,
.footer {
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}