@charset "utf-8";

/* 
 * テーマカラー変数
 * 
 * 各テーマは以下の変数を設定します：
 * --primary-color: メインカラー
 * --primary-color-rgb: RGB値（透明度調整用）
 * --secondary-color: セカンダリカラー
 * --accent-color: アクセントカラー
 * --background-color: 背景色
 * --form-background: フォーム背景色
 * --text-color: テキストカラー
 * --muted-text-color: 控えめなテキストカラー
 * --border-color: ボーダーカラー
 * --divider-color: 区切り線の色
 * --input-background: 入力欄背景色
 * --input-border: 入力欄ボーダー色
 * --input-icon-color: 入力アイコンの色
 * --input-focus-border: フォーカス時のボーダー色
 * --input-focus-shadow: フォーカス時のシャドウ色
 * --label-color: ラベルの色
 * --required-color: 必須ラベルの色
 * --optional-color: 任意ラベルの色
 * --button-text: ボタンのテキスト色
 * --button-hover: ボタンのホバー色
 * --shadow-color: 影の色
 * --section-border: セクション境界線の色
 * --note-color: 注釈テキストの色
 * --link-color: リンクの色
 * --link-hover-color: リンクのホバー色
 */

/* 共通のRGB値変換ヘルパー */
:root {
  --shadow-opacity: 0.1;
}

/* 1. モダン (デフォルト) - 改善版 */
.theme-modern {
  --primary-color: #4361ee;
  --primary-color-rgb: 67, 97, 238;
  --secondary-color: #3a0ca3;
  --accent-color: #2b2d42;
  --background-color: #f8f9fa;
  --form-background: #ffffff;
  --text-color: #2b2d42;
  --muted-text-color: #64748b;
  --border-color: #e2e8f0;
  --divider-color: #f1f5f9;
  --input-background: #ffffff;
  --input-border: #cbd5e1;
  --input-icon-color: #94a3b8;
  --input-focus-border: #4361ee;
  --input-focus-shadow: rgba(67, 97, 238, 0.25);
  --label-color: #334155;
  --required-color: #dc2626;
  --optional-color: #64748b;
  --button-text: #ffffff;
  --button-hover: #3a0ca3;
  --shadow-color: rgba(67, 97, 238, 0.1);
  --section-border: #f1f5f9;
  --note-color: #64748b;
  --link-color: #4361ee;
  --link-hover-color: #3a0ca3;
}

/* 2. プロフェッショナル (ビジネス向け) - 改善版 */
.theme-professional {
  --primary-color: #0a2540;
  --primary-color-rgb: 10, 37, 64;
  --secondary-color: #1e88e5;
  --accent-color: #03045e;
  --background-color: #f5f7fa;
  --form-background: #ffffff;
  --text-color: #1e293b;
  --muted-text-color: #64748b;
  --border-color: #cbd5e1;
  --divider-color: #e2e8f0;
  --input-background: #f8fafc;
  --input-border: #cbd5e1;
  --input-icon-color: #94a3b8;
  --input-focus-border: #1e88e5;
  --input-focus-shadow: rgba(30, 136, 229, 0.25);
  --label-color: #334155;
  --required-color: #dc2626;
  --optional-color: #64748b;
  --button-text: #ffffff;
  --button-hover: #03045e;
  --shadow-color: rgba(10, 37, 64, 0.08);
  --section-border: #e2e8f0;
  --note-color: #64748b;
  --link-color: #1e88e5;
  --link-hover-color: #0a2540;
}

/* 3. フェミニン */
.theme-feminine {
  --primary-color: #d81b60;
  --primary-color-rgb: 216, 27, 96;
  --secondary-color: #f06292;
  --accent-color: #ad1457;
  --background-color: #fce4ec;
  --form-background: #ffffff;
  --text-color: #4a4a4a;
  --muted-text-color: #999;
  --border-color: #f8bbd0;
  --divider-color: #fce4ec;
  --input-background: #ffffff;
  --input-border: #f8bbd0;
  --input-icon-color: #f48fb1;
  --input-focus-border: #ec407a;
  --input-focus-shadow: rgba(216, 27, 96, 0.2);
  --label-color: #880e4f;
  --required-color: #c2185b;
  --optional-color: #f06292;
  --button-text: #ffffff;
  --button-hover: #ad1457;
  --shadow-color: rgba(216, 27, 96, 0.1);
  --section-border: #fce4ec;
  --note-color: #ec407a;
  --link-color: #d81b60;
  --link-hover-color: #ad1457;
}

/* 4. クラシック */
.theme-classic {
  --primary-color: #795548;
  --primary-color-rgb: 121, 85, 72;
  --secondary-color: #a1887f;
  --accent-color: #5d4037;
  --background-color: #efebe9;
  --form-background: #ffffff;
  --text-color: #3e2723;
  --muted-text-color: #8d6e63;
  --border-color: #d7ccc8;
  --divider-color: #efebe9;
  --input-background: #f5f5f5;
  --input-border: #d7ccc8;
  --input-icon-color: #bcaaa4;
  --input-focus-border: #a1887f;
  --input-focus-shadow: rgba(121, 85, 72, 0.2);
  --label-color: #4e342e;
  --required-color: #c62828;
  --optional-color: #8d6e63;
  --button-text: #ffffff;
  --button-hover: #5d4037;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --section-border: #d7ccc8;
  --note-color: #8d6e63;
  --link-color: #795548;
  --link-hover-color: #5d4037;
}

/* 5. プレイフル */
.theme-playful {
  --primary-color: #ff9800;
  --primary-color-rgb: 255, 152, 0;
  --secondary-color: #ffb74d;
  --accent-color: #f57c00;
  --background-color: #fff8e1;
  --form-background: #ffffff;
  --text-color: #5d4037;
  --muted-text-color: #8d6e63;
  --border-color: #ffe0b2;
  --divider-color: #fff8e1;
  --input-background: #ffffff;
  --input-border: #ffcc80;
  --input-icon-color: #ffb74d;
  --input-focus-border: #ffb74d;
  --input-focus-shadow: rgba(255, 152, 0, 0.25);
  --label-color: #e65100;
  --required-color: #ef6c00;
  --optional-color: #ffb74d;
  --button-text: #ffffff;
  --button-hover: #f57c00;
  --shadow-color: rgba(255, 152, 0, 0.15);
  --section-border: #fff3e0;
  --note-color: #ff9800;
  --link-color: #ff9800;
  --link-hover-color: #f57c00;
}

/* 6. ミニマリスト - 改善版 */
.theme-minimalist {
  --primary-color: #333333;
  --primary-color-rgb: 51, 51, 51;
  --secondary-color: #555555;
  --accent-color: #111111;
  --background-color: #fafafa;
  --form-background: #ffffff;
  --text-color: #212121;
  --muted-text-color: #666666;
  --border-color: #e0e0e0;
  --divider-color: #f5f5f5;
  --input-background: #ffffff;
  --input-border: #d4d4d4;
  --input-icon-color: #999999;
  --input-focus-border: #555555;
  --input-focus-shadow: rgba(51, 51, 51, 0.2);
  --label-color: #333333;
  --required-color: #d32f2f;
  --optional-color: #757575;
  --button-text: #ffffff;
  --button-hover: #111111;
  --shadow-color: rgba(0, 0, 0, 0.05);
  --section-border: #f0f0f0;
  --note-color: #757575;
  --link-color: #333333;
  --link-hover-color: #111111;
}

/* 7. ボールド */
.theme-bold {
  --primary-color: #f44336;
  --primary-color-rgb: 244, 67, 54;
  --secondary-color: #ff5252;
  --accent-color: #d32f2f;
  --background-color: #ffffff;
  --form-background: #ffffff;
  --text-color: #212121;
  --muted-text-color: #757575;
  --border-color: #e0e0e0;
  --divider-color: #f5f5f5;
  --input-background: #ffffff;
  --input-border: #eeeeee;
  --input-icon-color: #e57373;
  --input-focus-border: #ff8a80;
  --input-focus-shadow: rgba(244, 67, 54, 0.25);
  --label-color: #b71c1c;
  --required-color: #d50000;
  --optional-color: #ff5252;
  --button-text: #ffffff;
  --button-hover: #d32f2f;
  --shadow-color: rgba(244, 67, 54, 0.15);
  --section-border: #ffebee;
  --note-color: #e57373;
  --link-color: #f44336;
  --link-hover-color: #d32f2f;
}

/* 8. アース（自然調）- 改善版 */
.theme-earth {
  --primary-color: #588157;
  --primary-color-rgb: 88, 129, 87;
  --secondary-color: #78a360;
  --accent-color: #3a5a40;
  --background-color: #f8f9f6;
  --form-background: #ffffff;
  --text-color: #283618;
  --muted-text-color: #606c38;
  --border-color: #dde5d0;
  --divider-color: #f1f5ec;
  --input-background: #ffffff;
  --input-border: #cad2c5;
  --input-icon-color: #a3b18a;
  --input-focus-border: #588157;
  --input-focus-shadow: rgba(88, 129, 87, 0.25);
  --label-color: #3a5a40;
  --required-color: #bc4749;
  --optional-color: #606c38;
  --button-text: #ffffff;
  --button-hover: #3a5a40;
  --shadow-color: rgba(40, 54, 24, 0.08);
  --section-border: #f1f5ec;
  --note-color: #606c38;
  --link-color: #588157;
  --link-hover-color: #3a5a40;
}

/* 9. テック */
.theme-tech {
  --primary-color: #006064;
  --primary-color-rgb: 0, 96, 100;
  --secondary-color: #00bcd4;
  --accent-color: #00838f;
  --background-color: #e0f7fa;
  --form-background: #ffffff;
  --text-color: #263238;
  --muted-text-color: #00acc1;
  --border-color: #b2ebf2;
  --divider-color: #e0f7fa;
  --input-background: #ffffff;
  --input-border: #4dd0e1;
  --input-icon-color: #26c6da;
  --input-focus-border: #26c6da;
  --input-focus-shadow: rgba(0, 96, 100, 0.2);
  --label-color: #006064;
  --required-color: #00acc1;
  --optional-color: #4dd0e1;
  --button-text: #ffffff;
  --button-hover: #00838f;
  --shadow-color: rgba(0, 96, 100, 0.08);
  --section-border: #e0f7fa;
  --note-color: #00acc1;
  --link-color: #006064;
  --link-hover-color: #00838f;
}

/* 10. エレガント */
.theme-elegant {
  --primary-color: #6a1b9a;
  --primary-color-rgb: 106, 27, 154;
  --secondary-color: #9c27b0;
  --accent-color: #4a148c;
  --background-color: #f3e5f5;
  --form-background: #ffffff;
  --text-color: #4a148c;
  --muted-text-color: #9c27b0;
  --border-color: #e1bee7;
  --divider-color: #f3e5f5;
  --input-background: #ffffff;
  --input-border: #ce93d8;
  --input-icon-color: #ba68c8;
  --input-focus-border: #ba68c8;
  --input-focus-shadow: rgba(106, 27, 154, 0.25);
  --label-color: #4a148c;
  --required-color: #8e24aa;
  --optional-color: #ab47bc;
  --button-text: #ffffff;
  --button-hover: #4a148c;
  --shadow-color: rgba(106, 27, 154, 0.1);
  --section-border: #e1bee7;
  --note-color: #9c27b0;
  --link-color: #6a1b9a;
  --link-hover-color: #4a148c;
}

/* 11. モノクローム（2024-2025トレンド） - 新規追加 */
.theme-monochrome {
  --primary-color: #262626;
  --primary-color-rgb: 38, 38, 38;
  --secondary-color: #525252;
  --accent-color: #0f0f0f;
  --background-color: #f9f9f9;
  --form-background: #ffffff;
  --text-color: #171717;
  --muted-text-color: #737373;
  --border-color: #e5e5e5;
  --divider-color: #f5f5f5;
  --input-background: #ffffff;
  --input-border: #d4d4d4;
  --input-icon-color: #a3a3a3;
  --input-focus-border: #525252;
  --input-focus-shadow: rgba(38, 38, 38, 0.2);
  --label-color: #404040;
  --required-color: #dc2626;
  --optional-color: #737373;
  --button-text: #ffffff;
  --button-hover: #0f0f0f;
  --shadow-color: rgba(23, 23, 23, 0.06);
  --section-border: #f5f5f5;
  --note-color: #737373;
  --link-color: #262626;
  --link-hover-color: #0f0f0f;
}

/* 12. ダスティブルー（2024-2025トレンド） - 新規追加 */
.theme-dusty-blue {
  --primary-color: #5c88da;
  --primary-color-rgb: 92, 136, 218;
  --secondary-color: #7ca3f5;
  --accent-color: #344a79;
  --background-color: #f8fafd;
  --form-background: #ffffff;
  --text-color: #2c3e50;
  --muted-text-color: #7f8c8d;
  --border-color: #e6edf5;
  --divider-color: #f1f5fa;
  --input-background: #ffffff;
  --input-border: #d1dced;
  --input-icon-color: #a2b5d1;
  --input-focus-border: #5c88da;
  --input-focus-shadow: rgba(92, 136, 218, 0.25);
  --label-color: #34495e;
  --required-color: #e53e3e;
  --optional-color: #7f8c8d;
  --button-text: #ffffff;
  --button-hover: #344a79;
  --shadow-color: rgba(44, 62, 80, 0.08);
  --section-border: #f1f5fa;
  --note-color: #7f8c8d;
  --link-color: #5c88da;
  --link-hover-color: #344a79;
}

/* テーマオプションのカラープレビュー */
.theme-option[data-theme="professional"] .theme-color-preview {
  background-color: #0a2540;
}

.theme-option[data-theme="feminine"] .theme-color-preview {
  background-color: #d81b60;
}

.theme-option[data-theme="modern"] .theme-color-preview {
  background-color: #4361ee;
}

.theme-option[data-theme="classic"] .theme-color-preview {
  background-color: #795548;
}

.theme-option[data-theme="playful"] .theme-color-preview {
  background-color: #ff9800;
}

.theme-option[data-theme="minimalist"] .theme-color-preview {
  background-color: #333333;
}

.theme-option[data-theme="bold"] .theme-color-preview {
  background-color: #f44336;
}

.theme-option[data-theme="earth"] .theme-color-preview {
  background-color: #588157;
}

.theme-option[data-theme="tech"] .theme-color-preview {
  background-color: #006064;
}

.theme-option[data-theme="elegant"] .theme-color-preview {
  background-color: #6a1b9a;
}

.theme-option[data-theme="monochrome"] .theme-color-preview {
  background-color: #262626;
}

.theme-option[data-theme="dusty-blue"] .theme-color-preview {
  background-color: #5c88da;
}