/*
 * ANNEI デザイントークン
 *
 * 前提: 利用者は 3 名。隔週に一度、たいていスマートフォンで開いて
 *       スコアを 1 回タップして閉じる。置き換える相手は表計算ソフト。
 *
 * ANNEI は WOELFE のためのシステムで、開くのは WOELFE の人。
 * 色はクラブから継ぐ（docs/design/annei-concept.md）。
 *
 * 決めごと:
 *   1. 色は場所で分ける。
 *      ブランド（記章・主ボタン・現在地・罫）は WOELFE の赤。
 *      データ（推奨者 / 中立者 / 批判者）は別の色。
 *      同じ赤を両方に使うと、どちらの意味かが読めなくなる。
 *   2. 区分は色だけで区別させない。必ず数値かラベルを添える。
 *      色覚に依存しないよう、3 色は色相だけでなく明度も離す。
 *   3. 触る対象は最低 44px 角。片手・親指で押せる大きさを下限にする。
 *   4. 余白は 4px の倍数だけを使う。値を都度決めない。
 *   5. 配色は明るい側に固定する。OS には追従しない。
 *      ブランドの色は、意図した明度の上でだけ意図どおりに見える。
 *      引き換えに、夜の暗い部屋では以前より眩しい。承知のうえ。
 */

:root {
  /* --- 面と文字 ---
     ホームページの実測値に寄せる。白 #FFFFFF、沈んだ面 #F4F3F3、文字は黒 */
  --paper:        #ffffff;
  --paper-sunk:   #f4f3f3;   /* 一段沈んだ面。ページの地 */
  --paper-raised: #ffffff;
  --line:         #e6e4e4;
  --line-strong:  #c8c5c5;

  --ink:          #141414;   /* 本文。ホームページは真っ黒に近い */
  --ink-muted:    #5a5757;   /* 補足 */
  --ink-faint:    #857f7f;   /* ラベル・単位 */
  --ink-inverse:  #ffffff;

  /* --- ブランド ---
     WOELFE の赤。ホームページのキャプチャから採った実際の値。
     出るのは記章・主ボタン・現在地・見出しの罫・タブの下線だけ。
     データの色には使わない */
  --brand:        #c50025;
  --brand-ink:    #ffffff;
  --brand-soft:   #fbe9ec;
  --brand-deep:   #9e001e;   /* 押した状態 */
  /* ロゴの副色（狼の目のオリーブ） */
  --olive:        #988b04;

  /* --- 操作 --- */
  --accent:       var(--brand);
  --accent-ink:   var(--brand-ink);
  --accent-soft:  var(--brand-soft);
  --focus:        #c50025;

  /* --- eNPS の 3 区分 --- */
  /* 推奨者 9-10 / 中立者 7-8 / 批判者 0-6
     批判者はブランドの赤と別物にする。暗く、彩度を落とした赤茶。
     中立者はロゴのオリーブに寄せる */
  --promoter:      #0e6b4f;
  --promoter-soft: #e3efea;
  --passive:       #8a7d06;
  --passive-soft:  #f6f2da;
  --detractor:     #8e3b34;
  --detractor-soft:#f4e6e4;

  /* --- 状態 ---
     兆候（警告）はブランドの赤で出す。
     他人事の赤より、自分たちのクラブの赤のほうが届く */
  --warn:      #8a7d06;
  --warn-soft: #f6f2da;
  --danger:    var(--brand);
  --danger-soft: var(--brand-soft);
  --ok:        #0e6b4f;
  --ok-soft:   #e3efea;

  /* --- 文字 --- */
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
          "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI",
          Meiryo, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   21px;
  --fs-xl:   28px;
  --fs-2xl:  40px;
  /* 入力欄は 16px を下回らない。下回ると iOS が拡大してしまう */
  --fs-input: 16px;

  --lh-tight: 1.3;
  --lh-base:  1.7;

  /* --- 余白（4px 刻み） --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- 形 --- */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(16, 20, 30, .06), 0 1px 3px rgba(16, 20, 30, .04);
  --shadow-2: 0 4px 16px rgba(16, 20, 30, .10);

  /* --- 動き ---
     時間と曲線も余白と同じく token にする。値を都度決めない。
     動きの意味は docs/design/annei-concept.md に定義がある。
     ANNEI の動きは時間の向きだけを表す（左→右＝未来、奥→手前＝過去、現在は動かない） */
  --motion-hold: 200ms;   /* 動きの「前」を作る待ち */
  --motion-fast: 220ms;   /* 場所が移る */
  --motion-base: 360ms;   /* 入ってくる */
  --motion-slow: 900ms;   /* 線が引かれる */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  /* 行き過ぎて戻る。到着に手応えを持たせるとき */
  --ease-back: cubic-bezier(.22, 1.15, .36, 1);
  /* 行き過ぎて戻る。到着に手応えを持たせるとき */
  --ease-back: cubic-bezier(.22, 1.15, .36, 1);

  /* --- 触れる大きさの下限 --- */
  --tap: 44px;

  --page-max: 720px;
  --page-max-wide: 1040px;   /* 管理画面の表とグラフ */
}