/* ============================================================
   ホームリスニング 固有トークン
   foundations.css の上にレイヤー
   - 学年色 6色（赤/橙/黄/緑/青/紫）+ 桃コンテンツ
   - 教材ステータス色（購入済/未購入/当月/猶予/停止）
   ============================================================ */

:root {
  /* ---------- 学年色（curriculum colors）----------
     EQWELブランドの teal/pink/lime/cta とは別軸。
     カリキュラム上の固定色。彩度は抑えめで夜間視認に配慮。
     桃はEQWELブランドピンク(#ED599F)と区別された peach。
     ============================================================ */
  --hl-grade-red:        #C9605C;   /* 赤 0.6-1.5歳 */
  --hl-grade-orange:     #E89C5C;   /* 橙 1.6-2.5歳 */
  --hl-grade-yellow:     #E8C547;   /* 黄 2.6-3.5歳 */
  --hl-grade-green:      #6FB85B;   /* 緑 3.6-4.5歳 */
  --hl-grade-blue:       #4A90C7;   /* 青 4.6-5.5歳 */
  --hl-grade-purple:     #8E6FBF;   /* 紫 5.6-6.5歳 */
  --hl-grade-peach:      #E89BB3;   /* 桃 10〜3月入室パック */

  /* 学年色のティント（背景・購入済セルの淡塗り） */
  --hl-grade-red-tint:    #F7E5E4;
  --hl-grade-orange-tint: #FBEBDC;
  --hl-grade-yellow-tint: #FAF1CE;
  --hl-grade-green-tint:  #E4F1DF;
  --hl-grade-blue-tint:   #DCE9F3;
  --hl-grade-purple-tint: #E5DEF1;
  --hl-grade-peach-tint:  #FAE5EB;

  /* 学年色の濃色（テキスト・アイコン） */
  --hl-grade-red-ink:    #9E4946;
  --hl-grade-orange-ink: #B87844;
  --hl-grade-yellow-ink: #B89A38;
  --hl-grade-green-ink:  #538C46;
  --hl-grade-blue-ink:   #386F99;
  --hl-grade-purple-ink: #6B5391;
  --hl-grade-peach-ink:  #B87189;

  /* ---------- 教材セル状態色 ---------- */
  /* 購入済: 学年色 tint 背景 + ink 色テキスト */
  /* 未購入: グレー */
  --hl-status-locked-bg:   #F2F0EE;
  --hl-status-locked-fg:   #B5AFAB;
  --hl-status-locked-bd:   #E5E3E0;

  /* 当月ハイライト: 2px teal outline */
  --hl-status-current-bd:  var(--eq-teal);
  --hl-status-current-bw:  2px;

  /* 視聴済: 学年色 ink 背景 + 白 text（やや暗い）*/
  --hl-status-viewed-bg:   var(--eq-bg-muted);

  /* 決済猶予: amber warning */
  --hl-status-grace-bg:    #FFF5E0;
  --hl-status-grace-fg:    #B8772F;
  --hl-status-grace-bd:    #F0D9A8;

  /* 決済停止: red ink */
  --hl-status-blocked-bg:  #FBECEC;
  --hl-status-blocked-fg:  #B0413E;
  --hl-status-blocked-bd:  #ECCBCB;

  /* ---------- 教材グリッドレイアウト ---------- */
  --hl-grid-cell-w:        56px;     /* スマホ縦：1セルの最小幅 */
  --hl-grid-cell-h:        56px;
  --hl-grid-cell-gap:      4px;
  --hl-grid-row-label-w:   28px;     /* 行頭の学年色ラベル幅 */
  --hl-grid-col-label-h:   28px;     /* 列頭の月ラベル高さ */

  /* ---------- 管理画面（PC）用 ---------- */
  --hl-admin-max-w:        1280px;
  --hl-admin-sidebar-w:    240px;
  --hl-admin-content-pad:  32px;
}

/* ============================================================
   学年色ヘルパクラス
   .hl-grade-{name}                → 学年バッジ背景フル
   .hl-grade-{name}-tint           → 学年色 tint 背景
   .hl-grade-{name}-text           → 学年色 ink テキスト
   .hl-grade-{name}-border         → 学年色ボーダー
   ============================================================ */
.hl-grade-red    { background: var(--hl-grade-red);    color: #fff; }
.hl-grade-orange { background: var(--hl-grade-orange); color: #fff; }
.hl-grade-yellow { background: var(--hl-grade-yellow); color: var(--eq-fg1); }
.hl-grade-green  { background: var(--hl-grade-green);  color: #fff; }
.hl-grade-blue   { background: var(--hl-grade-blue);   color: #fff; }
.hl-grade-purple { background: var(--hl-grade-purple); color: #fff; }
.hl-grade-peach  { background: var(--hl-grade-peach);  color: #fff; }
.hl-grade-momo   { background: var(--hl-grade-peach);  color: #fff; }

.hl-grade-red-tint    { background: var(--hl-grade-red-tint);    color: var(--hl-grade-red-ink); }
.hl-grade-orange-tint { background: var(--hl-grade-orange-tint); color: var(--hl-grade-orange-ink); }
.hl-grade-yellow-tint { background: var(--hl-grade-yellow-tint); color: var(--hl-grade-yellow-ink); }
.hl-grade-green-tint  { background: var(--hl-grade-green-tint);  color: var(--hl-grade-green-ink); }
.hl-grade-blue-tint   { background: var(--hl-grade-blue-tint);   color: var(--hl-grade-blue-ink); }
.hl-grade-purple-tint { background: var(--hl-grade-purple-tint); color: var(--hl-grade-purple-ink); }
.hl-grade-peach-tint  { background: var(--hl-grade-peach-tint);  color: var(--hl-grade-peach-ink); }
.hl-grade-momo-tint   { background: var(--hl-grade-peach-tint);  color: var(--hl-grade-peach-ink); }

.hl-grade-red-text    { color: var(--hl-grade-red-ink); }
.hl-grade-orange-text { color: var(--hl-grade-orange-ink); }
.hl-grade-yellow-text { color: var(--hl-grade-yellow-ink); }
.hl-grade-green-text  { color: var(--hl-grade-green-ink); }
.hl-grade-blue-text   { color: var(--hl-grade-blue-ink); }
.hl-grade-purple-text { color: var(--hl-grade-purple-ink); }
.hl-grade-peach-text  { color: var(--hl-grade-peach-ink); }