/* ラクハン デザイントークン
 *
 * ここが色・余白・文字・角丸・モーションの唯一の定義場所。
 * app.css には裸の値を書かない（tools/test_tokens.py が見張っている）。
 *
 * 色は2系統に分かれていて、混ぜて使わない。
 *   ブランド・操作色（--brand 系）…… 「押せるもの」にだけ使う
 *   データ目盛り色（--scale-*）  …… 4軸バーと band にだけ使う
 * 混ぜると「ブランドの色」と「この科目は重い」が同じ色になり、
 * 数字の意味そのものが壊れる。
 */
:root{
  /* ── 地と文字 ───────────────────────── */
  --ink:#16181d; --soft:#3b4148; --muted:#6b736f;
  --paper:#f4f6f3; --card:#fff; --dim:#e8ebe6; --rule:#d7dcd6;
  --on-dark:#fff;            /* 濃色帯の上に載せる文字 */
  /* 濃色帯（--brand-ground）の上の、弱い文字と罫。
     透明度で作ってあるので、実際の色は下地との合成結果になる。
     tools/test_tokens.py が合成したうえでコントラストを測っている。 */
  --on-dark-strong:rgba(255,255,255,.84); /* 12.49:1 */
  --on-dark-mid:rgba(255,255,255,.78);    /* 10.91:1 */
  --on-dark-weak:rgba(255,255,255,.62);   /* 7.32:1 */
  --on-dark-faint:rgba(255,255,255,.52);  /* 5.53:1。AI Community はここが一番弱い、が意図 */
  --on-dark-line:rgba(255,255,255,.34);  /* .28 だと 2.53:1 で図形の基準に届かない */

  /* 濃色帯の中の「もう一段の帯」（狭い画面のナビ）。面と罫であって文字ではないので
     コントラストの対象外。地の --brand-ground との差が小さいのは意図で、
     ロゴの帯と切れて見えれば足りる。強くすると2本目のヘッダに見える。 */
  --on-dark-band:rgba(255,255,255,.06);
  --on-dark-band-line:rgba(255,255,255,.14);

  /* 影とスクリム。文字ではないのでコントラストの対象外。 */
  --shadow-card:rgba(0,0,0,.16);
  --shadow-fab:rgba(0,0,0,.22);
  --shadow-modal:rgba(0,0,0,.2); /* 開屏の問診モーダルの浮き影 */
  --scrim:rgba(0,0,0,.45);

  /* ── ブランド・操作色 ─────────────────
     #DB6209 は阪大公式の青系を避けて「公認だと誤認されること」を
     色の段階で断つために選ばれた色。変更しない。単色のみ、グラデーション禁止。
     明地ではコントラストが足りないので、小さい文字には使わない。
     面（塗り）と図形の線にだけ使うこと。 */
  --brand:#DB6209;

  /* 外部サービスの公式色。ブランド色ではないので --brand とは分けて置く。
     app.css に直書きすると test_tokens が落ちる（裸の hex を禁じている）。 */
  --sns-ig-a:#F9CE34; --sns-ig-b:#EE2A7B; --sns-ig-c:#6228D7;
  --sns-x:#0b0b0b; --sns-line:#06C755;

  /* オレンジの面に載せる文字は「白ではなく黒」。
     2026-08-22 実測：
       #fff    on #DB6209 = 3.64:1  ← 通常文字の 4.5:1 に届かない
       #1A1A1A on #DB6209 = 4.78:1  ← 通す
     白のほうが見栄えはするが、選択中のチップの文字が読みにくくなる。
     ブランド色そのものは変えられないので、載せる文字のほうを変える。 */
  --brand-ink:#1A1A1A;

  /* オレンジの「文字」用。面ではなく文字に使うときはこちら。
     2026-08-22 実測：#DB6209 は明地で 3.35〜3.64:1 しかなく、
     小さい文字には使えない。#A84A06 なら card 5.76 / paper 5.30 /
     brand-soft 4.92 で、淡いオレンジ地の上でも通る。 */
  --brand-text:#A84A06;

  --brand-soft:#fbeade;        /* 選択チップ・推薦枠の淡い地 */
  --brand-line:#f0c9a8;        /* 淡い地の上の罫 */
  --focus:rgba(219,98,9,.45);  /* フォーカスリング */
  --brand-hover:rgba(219,98,9,.08); /* --brand を薄く透かしたホバー面（星ボタンなど） */
  --brand-ground:#1A1A1A;      /* ヘッダ帯の地。ブランド資料の SUMI */
  /* お気に入りの星が「未選択」のときの色。押せる状態は --brand。
     地（--card 等）が明暗で入れ替わってもこの星の色自体は変えない
     （2026-08-26 時点、実装にも元々ダークモード差分は無かった）。 */
  --star-off:#b9b9b9;

  /* ── データ目盛り色 ───────────────────
     軽い → 重い。操作色には絶対に使わない。
     --scale-heavy は旧 #b4532a から赤側へ寄せてある。
     ブランドオレンジと色相が近すぎて、
     「ブランドの色」と「この科目は重い」が見分けられなかったため。 */
  --scale-light:#0e7c66;
  /* 面（4軸バーの塗り）は上、文字はこちら。
     2026-08-22 実測：#0e7c66 を淡い地(#e2efeb)の上の文字に使うと 4.34:1 で、
     通常文字の 4.5:1 に僅かに届いていなかった（作り直し以前からの状態）。
     #0c6b59 なら soft 5.45 / card 6.44 / paper 5.92。 */
  --scale-light-text:#0c6b59;
  --scale-light-soft:#e2efeb;
  /* 2026-08-23 実測：#b8862c は下地 --dim(#e8ebe6) に対して 2.69:1 で、
     バーが track に溶けていた（図形は 3.0:1 必要）。#a8781f で 3.25:1。 */
  --scale-mid:#a8781f;
  --scale-heavy:#C0392B;
  --scale-heavy-soft:#f7eae3;

  /* band（拘束の帯）。b0 は「情報不足」で、目盛りの外。 */
  --band-none-bg:#e8e8e8;   --band-none-ink:#5c5c5c;
  --band-light-bg:#dcf3e3;  --band-light-ink:#1c7a41;
  --band-mid-bg:#fdf0d5;    --band-mid-ink:#8a6008;
  --band-heavy-bg:#fce4e4;  --band-heavy-ink:#a32b2b;

  /* 「まだ数字に入っていない」の帯。色相を増やさず、地の反転で強さを出す。
     --brand 系（押せるもの）でも --scale-* 系（データ目盛り）でもない第3の役割。
     候補だった濃いオレンジ #8A3A12 は、--brand との見分けが 2.14、
     --scale-heavy との見分けが 1.43 しかなく、
     「ブランドの色」「この科目は重い」と混ざるので却下した。
     2026-08-24 実測：明地 帯#1A1A1A vs card#fff = 17.4 ／ 白文字 17.4
                      暗地 帯#eef1ec vs card#1b1e23 = 14.67 ／ #16181d 15.58
     暗地で帯を #2f3540 にすると card との差が 1.36 しかなく消えるので反転させる。 */
  --alert-face:#1A1A1A;
  --alert-ink:#fff;

  /* ── 文字 ─────────────────────────── */
  --body:"Hiragino Sans","ヒラギノ角ゴシック",system-ui,sans-serif;
  --data:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --fs-xs:11.5px; --fs-sm:13px; --fs-base:15px; --fs-lg:17px;
  /* ヘッダのロゴ以外の文字（阪大 全学部の科目 / Designed by GUILD /
     AI COMMUNITY / ナビ）を1つの大きさに揃えるための1本。 */
  --fs-hdr-sub:14px;
  --fs-h2:17px; --fs-hero:clamp(28px,4.2vw,44px);

  /* ── 余白（4px グリッド）─────────────── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --pad:var(--sp-4);

  /* ── 角丸 ─────────────────────────── */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;

  /* ── モーション ───────────────────── */
  --dur-fast:120ms; --dur:200ms; --dur-slow:320ms; --dur-brand:1400ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-brand:cubic-bezier(.65,0,.35,1);
}

/* 狭い画面ではヘッダの添え書き類も一段落とす（ロゴ本体は app.css 側）。 */
@media (max-width:639px){
  :root{ --fs-hdr-sub:13px; }
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#eef1ec; --soft:#c3c9c4; --muted:#8b938d;
    --paper:#131519; --card:#1b1e23; --dim:#23272d; --rule:#333941;
    /* ブランド色そのものは暗地で 5.02:1 あるのでそのまま使う。
       ただし文字用は暗地の card(#1b1e23) で 4.59、brand-soft(#3a2312) で
       4.03 まで落ちるので、明るい側へ振った #E8853A を使う
       （paper 6.83 / card 6.24 / brand-soft 5.49）。 */
    --brand-text:#E8853A;
    --brand-soft:#3a2312;
    --brand-line:#5c3a1c;
    /* 暗地では #3fbfa1 が淡い地の上でも 6.16:1 あるので、面と文字を分けない */
    --scale-light:#3fbfa1; --scale-light-text:#3fbfa1; --scale-light-soft:#15302b;
    --scale-mid:#d3a955;
    --scale-heavy:#e0725c; --scale-heavy-soft:#33211a;
    /* band は元の実装がライト固定で、暗地では帯だけ白く浮いていた。
       トークン化のついでに暗地の値を与える。 */
    --band-none-bg:#2b2f35;   --band-none-ink:#9aa1a8;
    --band-light-bg:#15302b;  --band-light-ink:#5fd3b4;
    --band-mid-bg:#33290f;    --band-mid-ink:#dcb45f;
    --band-heavy-bg:#38201c;  --band-heavy-ink:#ef8f7a;
    /* 注意帯は暗地では反転する（明るい面に暗い文字）。理由は明地側のコメント。 */
    --alert-face:#eef1ec;
    --alert-ink:#16181d;
  }
}

/* 演出を止める設定の人には、いっさい動かさない。
   duration を 0 ではなく 1ms にするのは、
   transitionend を待っているコードが止まらないようにするため。 */
@media (prefers-reduced-motion: reduce){
  :root{
    --dur-fast:1ms; --dur:1ms; --dur-slow:1ms; --dur-brand:1ms;
  }
  *,*::before,*::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
}