/* =====================
   テーマ層
   -----------------------------------------------------------
   配色・角丸・余白などの「デザイントークン」をテーマ単位でまとめる。
   CSS変数は子孫に継承されるため、
     <body class="theme-blue">      → ページ全体が信頼・ビジネス基調
     <section class="menu theme-earth"> → そのセクションだけナチュラル基調
   のように、body にもセクションにも付けられる。

   新しい配色を足したいときは .theme-xxx を1ブロック追加するだけ。
   （例: tools/assembler.html の themes 配列に1語足すだけでピッカーにも反映される）
===================== */

/* テーマに依存しない固定トークン（ブランド色など） */
:root {
  /* Instagram ブランドグラデーション（配色テーマに関わらず固定） */
  --color-instagram-gradient: linear-gradient(
    45deg,
    #405de6 0%,   /* 青紫 */
    #5851db 10%,  /* 紫 */
    #833ab4 25%,  /* 深い紫 */
    #c13584 40%,  /* マゼンタ/ピンク */
    #e1306c 55%,  /* 濃いピンク */
    #fd1d1d 70%,  /* 赤 */
    #f56040 80%,  /* オレンジ */
    #ffdc80 95%,  /* 薄いオレンジ */
    #fcaf45 100%  /* 薄いオレンジ */
  );
}

/* =====================
   theme-blue（信頼・ビジネス／士業・IT・B2B向け・デフォルト）
   60:30:10 = オフホワイト : ディープネイビー : スカイブルー
===================== */
.theme-blue {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(30, 58, 138, 0.20);
  --color-primary:      #1E3A8A;
  --color-secondary:    #0284C7;
  --color-text-primary: #1E293B;
  --color-bg-section:   #F8FAFC;
  --color-bg-page:      #F8FAFC;
  --color-text-body:    #1E293B;
  --color-box-shadow:   rgba(30, 41, 59, 0.15);
  --color-border:       rgba(30, 41, 59, 0.2);
  --color-text-dark:    #1E293B;
  --color-text-muted:   #64748B;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #E2E8F0;

  --space-section: 64px; /* 誠実さを強調するため余白を広めに */

  --radius-card:  4px;  /* 角丸は控えめに（2〜4px）*/
  --radius-badge: 4px;
  --radius-frame: 2px;
  --radius-photo: 4px;

  /* CHEATSHEET.mdの推奨フォントペア表に対応。使う場合はテンプレート側で
     Google Fontsの<link>読み込みが別途必要（tools/assembler.htmlは全テーマ分を読み込み済み） */
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Inter', sans-serif; /* 代替: Montserrat */
}

/* =====================
   theme-earth（ナチュラル・オーガニック／サロン・カフェ・クリニック向け）
   60:30:10 = アイボリー : セージグリーン : テラコッタ
===================== */
.theme-earth {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(74, 93, 78, 0.25);
  --color-primary:      #4A5D4E;
  --color-secondary:    #D97706;
  --color-text-primary: #3a3027;
  --color-bg-section:   #FAF7F2;
  --color-bg-page:      #FAF7F2;
  --color-text-body:    #3a3027;
  --color-box-shadow:   rgba(58, 48, 39, 0.15);
  --color-border:       rgba(58, 48, 39, 0.2);
  --color-text-dark:    #3a3027;
  --color-text-muted:   #7a6c5a;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #ddd4c6;

  --space-section: 48px;

  --radius-card:  12px; /* 写真の角を少し丸め（8〜12px）*/
  --radius-badge: 8px;
  --radius-frame: 8px;
  --radius-photo: 12px;

  /* 游明朝はWindows/Macの標準搭載フォントを優先し、非搭載環境向けにShippori Minchoを
     Webフォントとして用意（tools/comparisons/text-variants.htmlで確認済み） */
  --font-jp: '游明朝', 'YuMincho', 'Shippori Mincho', serif;
  --font-en: 'Cormorant Garamond', serif; /* 代替: Lato */
}

/* =====================
   theme-mono（高級感・エレガント／不動産・美容・高価格帯サービス向け）
   60:30:10 = オフホワイト : チャコール : シャンパンゴールド
   ※元資料はダーク背景(#121212)案もあったが、文字色の明暗反転を伴う構造変更になるため
     今回は既存3テーマと同じ「値の差し替えのみ」でライト基調に統一。
     ダーク化は references/criteria.md に将来検討メモとして残す。
===================== */
.theme-mono {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(44, 44, 44, 0.35);
  --color-primary:      #2C2C2C;
  --color-secondary:    #C5A880;
  --color-text-primary: #222222;
  --color-bg-section:   #FBFBFB;
  --color-bg-page:      #FBFBFB;
  --color-text-body:    #222222;
  --color-box-shadow:   rgba(0, 0, 0, 0.12);
  --color-border:       rgba(0, 0, 0, 0.18);
  --color-text-dark:    #222222;
  --color-text-muted:   #777777;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #e6e6e6;

  --space-section: 48px;

  --radius-card:  4px;
  --radius-badge: 4px;
  --radius-frame: 4px;
  --radius-photo: 4px;

  --font-jp: 'Shippori Mincho', serif; /* 代替: 游明朝 */
  --font-en: 'Playfair Display', serif; /* 代替: Cinzel */
}

/* =====================
   theme-pop（ポップ・フレンドリー／スクール・採用サイト・個人向けサービス）
   60:30:10 = ピュアホワイト : ロイヤルブルー : ビビッドイエロー
===================== */
.theme-pop {
  --color-white:        #ffffff;
  --color-nav-link:     rgba(255, 255, 255, 0.92);
  --color-header-box:   rgba(37, 99, 235, 0.20);
  --color-primary:      #2563EB;
  --color-secondary:    #F59E0B;
  --color-text-primary: #1F2937;
  --color-bg-section:   #FFFFFF;
  --color-bg-page:      #FFFFFF;
  --color-text-body:    #1F2937;
  --color-box-shadow:   rgba(31, 41, 55, 0.15);
  --color-border:       rgba(31, 41, 55, 0.2);
  --color-text-dark:    #1F2937;
  --color-text-muted:   #6B7280;
  --color-toggler-border: rgba(255, 255, 255, 0.5);
  --color-map-bg:       #E5E7EB;

  --space-section: 48px;

  --radius-card:  24px; /* ボタン・カードの角丸を大きめに（16〜24px）*/
  --radius-badge: 50px;
  --radius-frame: 16px;
  --radius-photo: 24px;

  --font-jp: 'M PLUS Rounded 1c', sans-serif; /* 代替: Zen Maru Gothic */
  --font-en: 'Poppins', sans-serif;
}