/*
 * Design Tokens (CSS Custom Properties)
 *
 * Source:
 *   - 仕様書 docs/spec/lp-spec.md §17
 *   - サマリ docs/spec/_summary.md §3
 *   - 画像由来値 docs/design/figma-screens/sectionwise/*
 *   - オレンジ docs/design/logo/アプリアイコン.png
 *   - Phase 4.5 方向性 docs/design/direction/01.md (採用案A: モチタウンの祝祭)
 *
 * 抽出方法: 画像目視 + Python stdlib によるピクセル取得
 * 統合ルール: 数値 ramp 命名 (-50,-100,-300,-500,-700,-900)
 *             装飾色 (キャラ・辞書の茶など) は token 化せず画像に包含
 *
 * Phase 4.5 改訂方針 (Festival of Motitown):
 *   - Base を純白から クリーム微温 (#FFF7E8) へ。お祭りの灯り感を出す
 *   - Text を黒 → 濃紺 (#0D2A4E)。"祭り夜空" のコントラスト軸
 *   - Secondary orange は値を維持し、運用面で同格扱い
 *   - 祝祭演出のための glow / gradient / motion トークンを追加 (additive)
 *
 * 運用ルール:
 *   - --color-secondary-500 上で 白文字は使用禁止 (2.35:1)。必ず --color-text-primary
 *   - --color-primary-600 上で 白文字 OK (3.74:1, AA Large/UI)
 *
 * PC override (@media min-width: 734px) は font-size のみスケール。
 */

:root {
  /* ============================================
     Color — Primary (cyan-teal: ブランド + UI主軸)
     ============================================ */
  --color-primary-50:  #EEF9FD;  /* 02 panorama 上端 */
  --color-primary-100: #ABF2FF;  /* 02 sky panorama */
  --color-primary-300: #6ED3FD;  /* 01 hero モチベア体色 */
  --color-primary-500: #30AFB5;  /* ブランド: Astran ロゴ */
  --color-primary-600: #1B8FA8;  /* CTA: 白文字 AA 確保 (旧 #2EA3C5 から darker shift) */
  --color-primary-900: #0E8FAE;  /* hover / 深い強調 */

  /* ============================================
     Color — Accent Blue (UI/データ訴求、Primary と分離)
     ============================================ */
  --color-accent-blue-300: #6EBEFE;  /* 04 banner 周辺 */
  --color-accent-blue-500: #2593E7;  /* 04 監修バナー / 03 棒グラフ */
  --color-accent-blue-700: #1A7FD9;  /* hover / 強調 */

  /* ============================================
     Color — Accent Green (達成・スコア)
     ============================================ */
  --color-accent-green-500: #2B8462;  /* 03 中学英語スコアバナー */
  --color-accent-green-700: #137364;  /* 同 hover / 濃 */

  /* ============================================
     Color — Secondary (黄 + オレンジ: 祝祭の主役カラー)
     ============================================ */
  --color-secondary-300: #FFD83D;  /* 黄: 04 TOEIC タグ / 提灯 */
  --color-secondary-500: #FF6506;  /* 主オレンジ: アプリアイコン / 祝祭 */
  --color-secondary-700: #FF4900;  /* 深いオレンジ / hover */

  /* ============================================
     Color — Base (背景・汎用)
     クリーム微温シフトでお祭りの灯り感を出す
     ============================================ */
  --color-base-white:    #FFFFFF;  /* 純白: カード・device-frame に残す */
  --color-base-light:    #FFF7E8;  /* クリーム: ページ背景・薄い面 (旧 #F1F5F9) */
  --color-base-divider:  #E8DFC9;  /* 暖色 divider (旧 #DFDFDF) */

  /* ============================================
     Color — Text (祭り夜空の濃紺軸)
     クリーム背景上での実測コントラスト:
       primary  (#0D2A4E on #FFF7E8) = 14.05:1 AAA
       secondary(#3A4D6E on #FFF7E8) =  7.94:1 AA
       muted    (#5A6B85 on #FFF7E8) =  5.12:1 AA
     ============================================ */
  --color-text-primary:   #0D2A4E;  /* 見出し・本文主軸 */
  --color-text-secondary: #3A4D6E;  /* サブテキスト */
  --color-text-muted:     #5A6B85;  /* キャプション・補足 */

  /* ============================================
     Color — Festival (Phase 4.5 追加: 祝祭演出専用)
     ============================================ */
  --color-bg-page:                   #FFF7E8;  /* body 背景。Step 3 で base.css に適用予定 */
  --color-festival-orange-soft:      #FFD7A8;  /* リボン・ガーランド装飾の淡オレンジ */
  --color-festival-night:            #0D2A4E;  /* 濃紺夜空: hero / closing 強調背景 */
  --color-text-on-dark:              #FFFFFF;  /* 暗背景上の文字 */
  --color-festival-glow-cyan:        rgba(110, 211, 253, 0.45);  /* light burst (cyan) */
  --color-festival-glow-orange:      rgba(255, 137, 6, 0.35);    /* 花火 glow (orange) */
  --color-closing-spin-halo:         #B56F76;                    /* 06 closing モチベア局所オーラ (灰桜系ローズグレー) */
  --closing-flush-color:             #B56F76;                    /* 06 closing 縦紅潮グラデの基準色 (灰桜) */
  --closing-flush-start:             18%;                        /* 紅潮立ち上げ開始位置 (bridge 直下相当) */
  --closing-flush-peak:              48%;                        /* 紅潮フル強度位置 (spin 中心相当) */
  --closing-flush-end:               75%;                        /* 紅潮フェードアウト終了位置 */

  /* ============================================
     Color — Section themes (運動場 / 黒板 / ギャラリー)
     why-fun = 運動場, effectiveness = 黒板, high-quality = ギャラリー
     ============================================ */
  --color-field-soil:        #E8D4A8;                  /* 校庭の土 (中央) */
  --color-field-soil-top:    #EFE0C2;                  /* 土 上端 (空との境界) */
  --color-field-grass:       #A8C896;                  /* 校庭の芝 下端 */
  --color-field-grass-top:   #BFD9A3;                  /* 芝 上端 (土との境界) */
  --color-field-line:        rgba(255, 255, 255, 0.85); /* 白線トラック */
  --color-field-sky:         #ABF2FF;                  /* 校庭上の空 (上端) */
  --color-field-sky-mid:     #C9EAFC;                  /* 空と土の境界 */
  --color-field-fence:       #B8C5A8;                  /* 金網フェンス (校庭の縁) ベース */
  --color-field-fence-hi:    #D4DCC6;                  /* フェンス ハイライト */
  --color-field-fence-lo:    #6B7D6A;                  /* フェンス シャドウ */
  --color-field-sun:         rgba(255, 229, 107, 0.35); /* 太陽 glow */

  --color-blackboard-base:    #2E3138;                  /* 黒板ベース (チャコール) */
  --color-blackboard-top:     #353A42;                  /* 黒板 上端ハイライト */
  --color-blackboard-grid:    rgba(255, 255, 255, 0.05); /* 方眼線 */
  --color-blackboard-frame:   #5C3A21;                  /* 木枠 (ダークウォルナット) */
  --color-blackboard-frame-hi: #8B5A2B;                 /* 木枠ハイライト (上端の照り) */
  --color-blackboard-frame-lo: #3D2410;                 /* 木枠シャドウ (下端) */
  --color-chalk-white:        #FBF7F0;                  /* チョーク白 */
  --color-chalk-yellow:       #FFE56B;                  /* チョーク強調黄 (見出し用) */
  --color-chalk-yellow-soft:  #E4DCC6;                  /* チョーク淡黄 (本文用) */
  --color-chalk-pink:         #FF9EC4;                  /* チョークピンク (強調下線等) */
  --color-chalk-muted:        #B8AE94;                  /* チョーク灰白 (muted) */
  --color-chalk-tape:         rgba(255, 216, 61, 0.75); /* 黄テープ (紙留め) */

  --color-gallery-ivory:     #FBF7F0;                  /* ギャラリー象牙背景 */
  --color-gallery-gold-line: #C9A951;                  /* 額装の金細罫線 */
  --color-gallery-gold-soft: rgba(201, 169, 81, 0.18); /* 天井からの金光 */

  --gradient-field:
    linear-gradient(180deg,
      #EFE0C2 0%,
      #E8D4A8 38%,
      #BFD9A3 38%,
      #A8C896 100%);
  /* 劇的版: 空+土+芝 の 3 段 */
  --gradient-field-full:
    linear-gradient(180deg,
      #ABF2FF 0%,
      #C9EAFC 8%,
      #EFE0C2 12%,
      #E8D4A8 50%,
      #BFD9A3 50%,
      #A8C896 100%);
  --gradient-blackboard:
    linear-gradient(180deg, #2E3138 0%, #353A42 100%);
  --gradient-gallery-light:
    radial-gradient(ellipse at 50% -10%,
      rgba(201, 169, 81, 0.18) 0%,
      transparent 55%);

  /* ============================================
     Typography — Family
     ============================================ */
  --font-family-base:  "Noto Sans JP", system-ui, sans-serif;
  /* 黒板テーマ: 英数字=Caveat(手書きペン), 日本語=Klee One(鉛筆書き) でフォールバック連鎖 */
  --font-family-chalk:      "Caveat", "Klee One", "Noto Sans JP", cursive, system-ui;
  --font-family-chalk-body: "Kalam", "Klee One", "Noto Sans JP", system-ui, sans-serif;

  /* ============================================
     Typography — Font size (SP defaults, mobile-first)
     ============================================ */
  --font-size-display:    60px;  /* hero h1 (旧 40px、振り切り強度) */
  --font-size-heading-lg: 36px;  /* section h2 大 (旧 32px) */
  --font-size-heading-md: 24px;  /* section h2 標準 */
  --font-size-body-lg:    16px;  /* 本文デフォ */
  --font-size-body-md:    14px;  /* 副本文 */
  --font-size-caption:    12px;  /* キャプション */

  /* ============================================
     Typography — Weight / Line height
     ============================================ */
  --font-weight-regular: 400;
  --font-weight-bold:    700;
  --font-weight-black:   900;  /* 祝祭の特大見出し用 (Phase 4.5 追加) */

  --line-height-tight:  1.2;  /* 大見出し */
  --line-height-normal: 1.5;  /* 本文標準 (reset.css と同値) */
  --line-height-loose:  1.7;  /* 段落リーディング */

  /* ============================================
     Spacing (8px scale)
     ============================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ============================================
     Radius (祝祭の柔らかさ強化)
     ============================================ */
  --radius-sm:    8px;   /* small chip / tag */
  --radius-md:   20px;   /* card 標準 (旧 16px、+4) */
  --radius-lg:   28px;   /* 大型カード (spec §17 16-28 上限) */
  --radius-pill: 9999px; /* CTA ピル型 */

  /* ============================================
     Shadow (派手な影は禁止 / navy tint で暖かみを残す)
     ============================================ */
  --shadow-card:     0 6px 18px rgba(13, 42, 78, 0.10);   /* 標準カード */
  --shadow-elevated: 0 12px 32px rgba(13, 42, 78, 0.14);  /* スマホ画像浮遊感 */

  /* ============================================
     Festival Glows (Phase 4.5 追加: 花火・光の演出)
     ============================================ */
  --shadow-glow-cyan:   0 0 32px rgba(110, 211, 253, 0.45);
  --shadow-glow-orange: 0 0 36px rgba(255, 137, 6, 0.35);

  /* ============================================
     Festival Gradients (Phase 4.5 追加: 背景プリセット)
     ============================================ */
  --gradient-festival-sky:   linear-gradient(180deg, #ABF2FF 0%, #FFF7E8 100%);
  --gradient-festival-burst: radial-gradient(circle at center, rgba(255, 193, 128, 0.55) 0%, rgba(255, 193, 128, 0) 70%);
  --gradient-closing-spin-halo: radial-gradient(circle at 50% 58%, rgba(181, 111, 118, 0.48) 0%, rgba(181, 111, 118, 0) 62%);  /* 06 closing 局所ローズハロ。中心を下寄りに置き判決見出し直下のコントラスト低下を回避。終端を絞り次セクションへの滲み防止 */
  --gradient-festival-night: linear-gradient(180deg, #0D2A4E 0%, #1B4A7A 100%);

  /* ============================================
     Motion (Phase 4.5 追加: scroll reveal / hover 共通)
     ============================================ */
  --duration-fast:  200ms;  /* hover / 小モーション */
  --duration-base:  320ms;  /* reveal 標準 */
  --duration-slow:  540ms;  /* hero burst など長尺 */
  --easing-smooth:  cubic-bezier(0.22, 1, 0.36, 1);   /* 標準 reveal */
  --easing-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1); /* 祝祭の "ピョン" */

  /* ============================================
     Breakpoint / Layout (参照値)
     CSS Custom Properties は @media クエリで使えないため
     実際のメディアクエリは `@media (min-width: 734px)` と直書きする
     ============================================ */
  --breakpoint-pc:     734px;  /* iPhone 17 サイト準拠 */
  --max-content-width: 980px;  /* PC 最大コンテンツ幅 */
}

/* ============================================
   PC overrides (>= 734px)
   ============================================ */
@media (min-width: 734px) {
  :root {
    --font-size-display:    64px;  /* 旧 56px (祝祭強度に合わせて拡張) */
    --font-size-heading-lg: 44px;  /* 旧 40px */
    --font-size-heading-md: 28px;
    --font-size-body-lg:    18px;
    --font-size-body-md:    16px;
    --font-size-caption:    13px;
  }
}