/* デザイントークン（段階2：デザイン部門）。コンセプト「白いステージ × 8色のピック」。
   値の根拠とコントラストの表は 02_デザイン部門/デザインシステム.md。
   8色は OKLCH で明るさ・鮮やかさをそろえ、色相だけを45°ずつ回したもの（塗り L≈0.78、黄と金だけ 0.84〜0.86）。
   1色を4段で持つ：fill（塗り。上の文字は --on-fill）／deep（押せる厚み）／soft（淡い面）／ink（文字・線。白と soft の上で 4.6:1 以上）。
   要素に data-c="f0"〜"f7" / "lesson" / "brand" を付けると、その中の --c-* が切り替わる。ライトのみ。 */
:root {
  /* 面と文字（ほんのり紫に寄せた中立色） */
  --bg: #ffffff;
  --surface: #f7f6fb;
  --surface-2: #efedf6;
  --line: #e7e5f0;          /* 装飾の線（基準なし） */
  --field: #8b88a0;         /* 入力欄・チェック箱・スイッチの枠：白地 3.4:1 */
  --text: #1d1a2e;          /* 白地 16.9:1 */
  --muted: #5d5a72;         /* 白地 6.6:1・surface 6.2:1 */
  --on-fill: #1d1a2e;       /* 8色の塗りの上の文字：7.9〜11.1:1 */
  --danger: #c0283a;        /* 白地 5.6:1 */
  --danger-soft: #fdecee;
  --focus: #1d1a2e;

  /* 既定の色（data-c がないところ）＝ brand（すみれ） */
  --c-fill: #bda7fe; --c-deep: #8e71d6; --c-soft: #f4f1ff; --c-ink: #795dba;

  /* 書体：和文は丸ゴシック、数字・欧文の見出しは丸い欧文 */
  --font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  --font-display: "Nunito", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --text-xs: 0.875rem;      /* 14px：チップ・ラベル（14px未満は使わない。再評価 #3） */
  --text-sm: 0.875rem;      /* 14px：補足 */
  --text-md: 1rem;          /* 16px：本文 */
  --text-lg: 1.1875rem;     /* 19px：小見出し */
  --text-xl: 1.5rem;        /* 24px：画面の見出し */
  --text-2xl: clamp(1.75rem, 7vw, 2.125rem); /* 28〜34px：導入の大見出し */
  --leading: 1.75;
  --leading-tight: 1.4;

  /* 形と余白 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-pill: 999px;
  --press: 4px;             /* 押せる厚み */
  --tap: 48px;
  --content-max: 600px;
  --tabbar-h: 64px;

  /* 動き（motion.md §4-12） */
  --dur-press: 150ms;
  --dur-ui: 220ms;
  --dur-enter: 280ms;
  --dur-grow: 600ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

/* 8色＋レッスン（金）＋ブランド（すみれ）。fill の上は --on-fill、ink は白と soft で 4.6:1 以上 */
[data-c="f0"] { --c-fill: #ff958e; --c-deep: #d15c56; --c-soft: #fef0ee; --c-ink: #b54a46; --on-fill: #1d1a2e; } /* コーラル */
[data-c="f1"] { --c-fill: #ff9b52; --c-deep: #c9690c; --c-soft: #fff0e7; --c-ink: #a75605; --on-fill: #1d1a2e; } /* オレンジ */
[data-c="f2"] { --c-fill: #f4ce23; --c-deep: #ba9c0a; --c-soft: #faf4dd; --c-ink: #7f6a03; --on-fill: #1d1a2e; } /* イエロー */
[data-c="f3"] { --c-fill: #68d36f; --c-deep: #409d48; --c-soft: #e8f9e7; --c-ink: #267d30; --on-fill: #1d1a2e; } /* グリーン */
[data-c="f4"] { --c-fill: #0cd1d1; --c-deep: #0c9999; --c-soft: #ddfafa; --c-ink: #047879; --on-fill: #1d1a2e; } /* ティール */
[data-c="f5"] { --c-fill: #71bfff; --c-deep: #168dd9; --c-soft: #ebf5fe; --c-ink: #0471b2; --on-fill: #1d1a2e; } /* ブルー */
[data-c="f6"], [data-c="brand"] { --c-fill: #bda7fe; --c-deep: #8e71d6; --c-soft: #f4f1ff; --c-ink: #795dba; --on-fill: #1d1a2e; } /* バイオレット */
[data-c="f7"] { --c-fill: #ff8acf; --c-deep: #c35c9b; --c-soft: #feeef6; --c-ink: #a84b84; --on-fill: #1d1a2e; } /* ピンク */
[data-c="lesson"] { --c-fill: #2e2a45; --c-deep: #120f22; --c-soft: #efedf6; --c-ink: #2e2a45; --on-fill: #ffffff; } /* レッスン＝墨。8色のどれとも違う「講師の色」（役割別レビュー V1）。白文字 13.7:1 */