/*
 * variables.css
 * デザイントークン（CSS変数）の定義
 * ここを変えるだけでサイト全体のデザインが変わる。
 * reset.css の次、base.css より前に読み込むこと。
 */

:root {

    /* ─────────────────────────────────────────
       祭りカラー（多色展開・明るめトーン）
       装飾・背景・仕切りに使う。文字色には使わない。
    ───────────────────────────────────────── */
    --festival-red:    #FF4136;
    --festival-yellow: #FFDC00;
    --festival-green:  #2ECC40;
    --festival-blue:   #0074D9;
    --festival-orange: #FF851B;
    --festival-pink:   #FF69B4;
    --festival-purple: #B10DC9;
    --festival-navy:   #001F5B;

    /* ─────────────────────────────────────────
       文字色（高コントラスト・可読性最優先）
       背景色との比が WCAG AA（4.5:1以上）を満たすこと
    ───────────────────────────────────────── */
    --text-main:    #2b2b2b;   /* 本文（白背景比: 約12:1） */
    --text-sub:     #666666;   /* サブテキスト（白背景比: 約5.7:1） */
    --text-on-dark: #FFFDF0;   /* 紺・暗色背景上の文字 */

    /* ─────────────────────────────────────────
       アクション色（ボタン・CTA・リンク）
       1色に絞る。サイト全体で統一。
    ───────────────────────────────────────── */
    --action:       #FF4136;
    --action-hover: #cc2920;

    /* ─────────────────────────────────────────
       背景色
    ───────────────────────────────────────── */
    --bg-base:  #FFFDF0;   /* 生成りの紙色（和の温かみ・サイト全体ベース） */
    --bg-card:  #FFFFFF;   /* カード・コンテンツ背景 */
    --bg-dark:  #001F5B;   /* ヘッダー・フッター・暗背景 */

    /* ─────────────────────────────────────────
       タイポグラフィ
       clamp(最小サイズ, 推奨サイズ, 最大サイズ)で
       画面幅に応じて滑らかに可変。本文最小16px死守。
    ───────────────────────────────────────── */
    --font-heading: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
    --font-body:    'Noto Sans JP',  'Hiragino Kaku Gothic ProN', sans-serif;

    --fs-body: clamp(1rem,      0.95rem + 0.3vw, 1.125rem);  /* 16px〜18px */
    --fs-h1:   clamp(1.8rem,    1.4rem  + 2vw,   3rem);      /* 29px〜48px */
    --fs-h2:   clamp(1.4rem,    1.1rem  + 1.5vw, 2.2rem);    /* 22px〜35px */
    --fs-h3:   clamp(1.1rem,    0.9rem  + 1vw,   1.6rem);    /* 18px〜26px */
    --fs-small: 0.875rem;                                     /* 14px */

    /* ─────────────────────────────────────────
       レイアウト
    ───────────────────────────────────────── */
    --content-max:   1100px;  /* コンテンツ最大幅 */
    --sidebar-width: 280px;   /* PC右サイドバー幅 */
    --gap:           clamp(1rem, 0.8rem + 1vw, 2rem); /* グリッド間隔 */

    /* ─────────────────────────────────────────
       スペーシング（余白の基準単位）
    ───────────────────────────────────────── */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;
    --space-2xl: 64px;

    /* ─────────────────────────────────────────
       装飾
    ───────────────────────────────────────── */
    --shadow-pop:    4px 4px 0 rgba(0, 31, 91, 0.25);  /* お祭り感のある影（ずらし型） */
    --shadow-card:   0 6px 20px rgba(0, 0, 0, 0.28);   /* カードの浮き（賑やかな背景から浮かせるため強め） */
    --radius-card:   8px;
    --radius-btn:    999px;  /* ボタンは丸角（フィルターボタン等） */
    --border-thick:  3px solid var(--festival-navy);
    --transition:    0.2s ease;

    /* ─────────────────────────────────────────
       プロモーション表示（ステマ規制対応）
       デザインは variables で、文言は templates で管理
    ───────────────────────────────────────── */
    --pr-notice-bg:    #FFF8DC;
    --pr-notice-color: #5a4800;
    --pr-notice-border: 1px solid #E8C800;

    /* ─────────────────────────────────────────
       追加トークン
    ───────────────────────────────────────── */
    --space-2xs:  2px;
    --space-3xl:  96px;
    --border-color:       #E0DCCF;
    --border-color-light: #F0EDE4;
    --bg-overlay:         rgba(0, 0, 0, 0.65);  /* バナー・ヒーロー上の半透明下地 */
    --radius-sm:          4px;
    --shadow-card-hover:  0 12px 30px rgba(0, 0, 0, 0.36);
    --shadow-btn:         3px 3px 0 rgba(0, 31, 91, 0.20);
    --transition-fast:    0.15s ease;
    --transition-base:    var(--transition);

    /* ─────────────────────────────────────────
       v1後方互換エイリアス
       components.css / layout.css が参照する旧名を
       v2 変数名にブリッジする。lib/ 移行後に削除。
    ───────────────────────────────────────── */
    --color-action:        var(--action);
    --color-action-hover:  var(--action-hover);
    --color-action-text:   var(--text-on-dark);
    --color-text:          var(--text-main);
    --color-text-sub:      var(--text-sub);
    --color-text-on-dark:  var(--text-on-dark);
    --color-bg:            var(--bg-card);
    --color-bg-cream:      var(--bg-base);
    --color-bg-dark:       var(--bg-dark);
    --color-bg-overlay:    var(--bg-overlay);
    --color-border:        var(--border-color);
    --color-border-light:  var(--border-color-light);
    --color-festival-navy: var(--festival-navy);
    --color-festival-gold: var(--festival-yellow);
    --color-festival-red:  var(--festival-red);
    --radius-md:   var(--radius-card);
    --radius-lg:   var(--radius-card);
    --radius-full: var(--radius-btn);
}