/**
 * ホーホービデオ — グローバル CSS デザイントークン
 * =========================================================
 * 使い方:
 *   <link rel="stylesheet" href="howhow-tokens.css">
 *   または functions.php で wp_enqueue_style() して読み込む。
 *
 * すべての画面・テンプレートで :root の変数を参照してください。
 * LearnDash / MemberPress テンプレートオーバーライドにも対応。
 * =========================================================
 */

/* ===========================================================
   1. カラートークン
   =========================================================== */
:root {
  /* --- ブランド（プライマリ） --- */
  --hh-primary:          #E8473D;   /* ホーホービデオ・レッド */
  --hh-primary-light:    #FFF0EF;   /* 薄い背景用 */
  --hh-primary-dark:     #C13028;   /* ホバー・アクティブ */
  --hh-primary-focus:    rgba(232,71,61,.12);   /* フォーカスリング */
  --hh-primary-shadow:   rgba(232,71,61,.25);   /* ボタンシャドウ */

  /* --- 達成・連続学習（アンバー） --- */
  --hh-amber:            #F5A623;
  --hh-amber-dark:       #B45309;
  --hh-amber-light:      #FFF8EC;

  /* --- 教科カラー --- */
  --hh-ondoku:           #22A39F;   /* 音読 */
  --hh-ondoku-dark:      #1A7A77;
  --hh-ondoku-light:     #E7F7F6;

  --hh-anzan:            #4A8FD4;   /* 暗算 */
  --hh-anzan-dark:       #2C6FAD;
  --hh-anzan-light:      #EBF4FC;

  --hh-kanji:            #F5A623;   /* 漢字（アンバー共通） */
  --hh-kanji-dark:       #B45309;
  --hh-kanji-light:      #FFF8EC;

  --hh-keisan:           #16A34A;   /* 計算 */
  --hh-keisan-dark:      #14532D;
  --hh-keisan-light:     #F0FDF4;

  --hh-doojo:            #8B5CF6;   /* 道場系 */
  --hh-doojo-dark:       #6D28D9;
  --hh-doojo-light:      #F3F0FF;

  /* --- ニュートラル --- */
  --hh-bg:               #F5F6FA;   /* ページ背景 */
  --hh-surface:          #ffffff;   /* カード・パネル */
  --hh-surface-raised:   #FAFBFC;   /* 薄く浮き上がった面 */
  --hh-ink:              #1A1A2E;   /* 本文テキスト */
  --hh-ink-muted:        #6B7280;   /* サブ・補足テキスト */
  --hh-ink-subtle:       #9CA3AF;   /* プレースホルダー等 */
  --hh-border:           #E8ECF1;   /* 標準ボーダー */
  --hh-border-strong:    #D1D5DB;   /* 強調ボーダー */
  --hh-overlay:          rgba(26,26,46,.45);  /* モーダル背景 */
}

/* ===========================================================
   2. 形状トークン
   =========================================================== */
:root {
  --hh-radius-xs:        4px;
  --hh-radius-sm:        10px;
  --hh-radius-md:        14px;
  --hh-radius-card:      18px;   /* カード標準 */
  --hh-radius-pill:      999px;  /* チップ・バッジ */
}

/* ===========================================================
   3. シャドウトークン
   =========================================================== */
:root {
  --hh-shadow-card:      0 1px 4px rgba(0,0,0,.07), 0 0 1px rgba(0,0,0,.04);
  --hh-shadow-card-hover:0 4px 16px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --hh-shadow-overlay:   0 8px 30px rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.08);
  --hh-shadow-primary:   0 4px 16px var(--hh-primary-shadow);
}

/* ===========================================================
   4. タイポグラフィトークン
   =========================================================== */
:root {
  --hh-font-ja:          'Sawarabi Gothic', 'Noto Sans JP', sans-serif;
  --hh-font-base:        'Open Sans', system-ui, sans-serif;

  /* スケール */
  --hh-text-2xs:         10px;
  --hh-text-xs:          11px;
  --hh-text-sm:          12px;
  --hh-text-base:        14px;
  --hh-text-md:          16px;
  --hh-text-lg:          20px;
  --hh-text-xl:          24px;
  --hh-text-2xl:         32px;
  --hh-text-3xl:         40px;

  /* ウェイト */
  --hh-weight-normal:    400;
  --hh-weight-semi:      600;
  --hh-weight-bold:      700;

  /* 行間 */
  --hh-leading-tight:    1.25;
  --hh-leading-base:     1.6;
  --hh-leading-relaxed:  1.75;
}

/* ===========================================================
   5. スペーシングトークン
   =========================================================== */
:root {
  --hh-space-1:          4px;
  --hh-space-2:          8px;
  --hh-space-3:          12px;
  --hh-space-4:          16px;
  --hh-space-5:          20px;
  --hh-space-6:          24px;
  --hh-space-8:          32px;
  --hh-space-10:         40px;
  --hh-space-12:         48px;
  --hh-space-16:         64px;
}

/* ===========================================================
   6. トランジション・アニメーショントークン
   =========================================================== */
:root {
  --hh-ease:             .15s ease;
  --hh-ease-slow:        .3s ease;
  --hh-ease-bounce:      .25s cubic-bezier(.34,1.56,.64,1);
}

/* ===========================================================
   7. レイアウトトークン
   =========================================================== */
:root {
  --hh-sidebar-w:        240px;  /* デスクトップ左サイドバー幅 */
  --hh-lesson-sidebar-w: 260px;  /* レッスンページ右トピックリスト幅 */
  --hh-content-max:      960px;  /* 最大コンテンツ幅 */
  --hh-page-max:         1240px; /* 最大ページ幅 */
  --hh-topbar-h:         60px;   /* Astraヘッダー高さの想定値 */
}

/* ===========================================================
   8. コンポーネント変数（デフォルト値）
   =========================================================== */
:root {
  /* カード */
  --hh-card-padding:     var(--hh-space-4);
  --hh-card-radius:      var(--hh-radius-card);
  --hh-card-shadow:      var(--hh-shadow-card);
  --hh-card-border:      1px solid var(--hh-border);

  /* プログレスバー */
  --hh-progress-h:       7px;
  --hh-progress-radius:  var(--hh-radius-pill);
  --hh-progress-track:   var(--hh-border);

  /* ボタン（プライマリ） */
  --hh-btn-radius:       var(--hh-radius-sm);
  --hh-btn-padding:      10px 20px;
  --hh-btn-font:         var(--hh-font-ja);
  --hh-btn-font-size:    var(--hh-text-base);
}

/* ===========================================================
   9. LearnDash テンプレートオーバーライド用スコープ
   =========================================================== */
.hh-ld-wrap {
  font-family: var(--hh-font-base);
  color:       var(--hh-ink);
  background:  var(--hh-bg);
  line-height: var(--hh-leading-base);
  font-size:   var(--hh-text-base);
}

/* LearnDash が出力するデフォルトスタイルのリセット */
.hh-ld-wrap .ld-item-list,
.hh-ld-wrap .ld-item-list-item { list-style: none; margin: 0; padding: 0; }

.hh-ld-wrap .ld-item-list-item { border-color: var(--hh-border) !important; }
.hh-ld-wrap .ld-item-list-item:hover { background: var(--hh-bg) !important; }

.hh-ld-wrap a { color: var(--hh-primary); }
.hh-ld-wrap a:hover { color: var(--hh-primary-dark); }

/* ボタン共通 */
.hh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hh-space-2);
  padding: var(--hh-btn-padding);
  border: none;
  border-radius: var(--hh-btn-radius);
  font-family: var(--hh-btn-font);
  font-size: var(--hh-btn-font-size);
  font-weight: var(--hh-weight-bold);
  cursor: pointer;
  text-decoration: none;
  transition: var(--hh-ease);
  white-space: nowrap;
}
.hh-btn-primary   { background: var(--hh-primary); color: #fff; }
.hh-btn-primary:hover { background: var(--hh-primary-dark); color: #fff; }
.hh-btn-ghost     { background: transparent; color: var(--hh-primary); border: 1.5px solid var(--hh-primary); }
.hh-btn-ghost:hover { background: var(--hh-primary-light); }
.hh-btn-amber     { background: var(--hh-amber); color: #fff; }
.hh-btn-amber:hover { background: var(--hh-amber-dark); }
.hh-btn-lg        { padding: 13px 26px; font-size: var(--hh-text-md); border-radius: var(--hh-radius-md); }
.hh-btn-full      { width: 100%; }

/* プログレスバー共通 */
.hh-progress-track {
  height: var(--hh-progress-h);
  background: var(--hh-progress-track);
  border-radius: var(--hh-progress-radius);
  overflow: hidden;
}
.hh-progress-fill {
  height: 100%;
  border-radius: var(--hh-progress-radius);
  transition: width var(--hh-ease-slow);
}

/* チップ・バッジ共通 */
.hh-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--hh-radius-pill);
  font-size: var(--hh-text-xs);
  font-weight: var(--hh-weight-bold);
  white-space: nowrap;
}
.hh-chip-primary { background: var(--hh-primary-light); color: var(--hh-primary-dark); }
.hh-chip-muted   { background: var(--hh-bg); color: var(--hh-ink-muted); border: 1px solid var(--hh-border); }
.hh-chip-amber   { background: var(--hh-amber-light); color: var(--hh-amber-dark); }
.hh-chip-green   { background: var(--hh-ondoku-light); color: var(--hh-ondoku-dark); }

/* ===========================================================
   10. クォータ上限／アクセス制限通知（.hh-quota-notice）
   アプリの回数上限・ログイン促し・有料プラン案内に共通利用
   =========================================================== */
.hh-quota-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hh-space-4);
  padding: var(--hh-space-8) var(--hh-space-6);
  background: var(--hh-amber-light);
  border: 1.5px solid var(--hh-amber);
  border-radius: var(--hh-radius-card);
  text-align: center;
  font-family: var(--hh-font-ja);
  max-width: 480px;
  margin: var(--hh-space-8) auto;
}
.hh-quota-notice__msg {
  margin: 0;
  font-size: var(--hh-text-md);
  font-weight: var(--hh-weight-semi);
  color: var(--hh-ink);
  line-height: var(--hh-leading-base);
}
.hh-quota-notice__btn {
  display: inline-block;
  padding: var(--hh-btn-padding);
  background: var(--hh-primary);
  color: #fff;
  border-radius: var(--hh-btn-radius);
  font-family: var(--hh-btn-font);
  font-size: var(--hh-btn-font-size);
  font-weight: var(--hh-weight-bold);
  text-decoration: none;
  transition: var(--hh-ease);
}
.hh-quota-notice__btn:hover {
  background: var(--hh-primary-dark);
  color: #fff;
  text-decoration: none;
}