/*
 * デザイントークン。規則の全文は プロジェクト直下の DESIGN.md を参照。
 *
 * 方向: 測定器の印字。計測用紙。
 * この製品の中身は「時間とともに減っていく数値」なので、見た目もそこから出す。
 * 飾りではなく、計器が値を読ませるための作法に従う。
 *
 * 影は使わない。段差は罫線・地の明度差・左端の色帯の3つだけで作る。
 * 色はすべて意味を持つ。票の重みは一色の強弱だけで表し、色相は変えない
 * （赤・橙・青と振ると、計器ではなく虹になる）。
 */

:root {
  color-scheme: light dark;

  /* ---- 地と面 ---- */
  /* わずかに寒色。温かいクリーム地には戻さない（DESIGN.md 7節の禁止事項） */
  --paper: oklch(96.6% 0.002 250);
  --paper-sunk: oklch(93.6% 0.003 250);
  --surface: oklch(100% 0 0);
  --surface-raised: oklch(100% 0 0);

  /* 罫線が段差の主役。見える濃さで引く */
  /* 罫線はやや弱く。区切りの役目は、地と面の明度差にも分担させる */
  --line: oklch(87% 0.005 250);
  --line-strong: oklch(78% 0.006 250);
  /*
   * 触れる部品（入力欄・ボタン・選択肢）の枠。装飾の罫線とは別に持つ。
   * 「どこが入力欄か」は輪郭でしか分からないので、ここだけは薄くできない。
   * WCAG 1.4.11 の基準3.0に対して、白地で3.4・紙地で3.1。
   */
  --line-field: oklch(64% 0.008 250);

  /* ---- 文字 ---- */
  --ink: oklch(16% 0.01 250);
  --ink-soft: oklch(45% 0.008 250);
  --ink-faint: oklch(60% 0.006 250);

  /* ---- 信号色（票の重み）---- */
  /* 同じ色相 23 の強弱だけで段階を作る */
  --signal: oklch(48% 0.23 23);
  --signal-weak: oklch(62% 0.14 23);
  /*
   * 信号色の上に載せる文字。明るい面では信号色が濃いので白、
   * 暗い面では信号色を明るくするので黒に反転させる。
   * 固定にすると、暗い面でコントラスト比が3.3まで落ちて読めなくなる。
   */
  --on-signal: oklch(99% 0 0);

  --tier-1: var(--signal);
  --tier-1-soft: oklch(95.5% 0.03 23);
  --tier-1-edge: oklch(72% 0.14 23);

  --tier-2: var(--signal-weak);
  --tier-2-soft: oklch(96.5% 0.02 23);
  --tier-2-edge: oklch(82% 0.08 23);

  --tier-3: oklch(45% 0.01 250);
  --tier-3-soft: oklch(95% 0.003 250);
  --tier-3-edge: var(--line-strong);

  /* 0倍は面を塗らない。力を失った状態 */
  --tier-0: oklch(62% 0.004 250);
  --tier-0-soft: transparent;
  --tier-0-edge: var(--line);

  --tier: var(--tier-3);
  --tier-soft: var(--tier-3-soft);
  --tier-edge: var(--tier-3-edge);

  /* ---- ○▲× ---- */
  --maru: oklch(45% 0.13 155);
  --maru-soft: oklch(95% 0.04 155);
  --sankaku: oklch(55% 0.12 75);
  --sankaku-soft: oklch(95.5% 0.04 75);
  --batsu: var(--signal);
  --batsu-soft: oklch(95.5% 0.03 23);

  /* ---- 書体 ---- */
  /*
   * 等幅を主役に据える。これがこの製品の声。
   * 和文のWebフォントは読み込まない。軽くても1MB超で、LINEから開かれる
   * モバイル前提の道具には重すぎる。代わりに字間と太さを強く作り込んで、
   * 既定のままに見せない。
   */
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --font-ja: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-ui: var(--font-ja);
  --font-num: var(--font-mono);

  /* ---- 大きさ ---- */
  /* 段を飛ばす。本文に対して主数値は4倍以上 */
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
  --text-hero: clamp(3.5rem, 2rem + 7vw, 6rem);

  /* ---- 余白 ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-section: clamp(2rem, 1.5rem + 3vw, 3.5rem);

  /* ---- 形 ---- */
  /*
   * 角は基本的に立てる。ただし大学生に配る道具として硬すぎたので、
   * 触れる部品を中心に少しだけ丸めた。8px以上にはしない（DESIGN.md 7節）。
   * ここを上げすぎると、一律の角丸＝よくある既定値の見た目に戻る。
   */
  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 7px;
  --radius-pill: 999px;

  /*
   * 影は使わない。DESIGN.md 6節。
   * 既存の指定を一度に消すと漏れるので、変数自体を無効化して封じる。
   */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;

  /* ---- 動き ---- */
  --dur-fast: 100ms;
  --dur: 180ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.2, 0, 0, 1);

  --max-w: 44rem;
}

/* 段階の色。:root だけでなく任意の要素に効かせる */
[data-tier="0"] {
  --tier: var(--tier-0);
  --tier-soft: var(--tier-0-soft);
  --tier-edge: var(--tier-0-edge);
}
[data-tier="1"] {
  --tier: var(--tier-1);
  --tier-soft: var(--tier-1-soft);
  --tier-edge: var(--tier-1-edge);
}
[data-tier="2"] {
  --tier: var(--tier-2);
  --tier-soft: var(--tier-2-soft);
  --tier-edge: var(--tier-2-edge);
}
[data-tier="3"] {
  --tier: var(--tier-3);
  --tier-soft: var(--tier-3-soft);
  --tier-edge: var(--tier-3-edge);
}

/*
 * 暗い面。主役ではないが、夜に開く人のために用意する。
 * 黒地に蛍光色にはしない。それ自体がAI既定値のもう一つの顔なので、
 * 計器の裏板のような、彩度の低い濃紺寄りのグレーにとどめる。
 */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(18% 0.008 250);
    --paper-sunk: oklch(14% 0.008 250);
    --surface: oklch(23.5% 0.008 250);
    --surface-raised: oklch(26% 0.008 250);

    --line: oklch(32% 0.008 250);
    --line-strong: oklch(41% 0.009 250);
    --line-field: oklch(58% 0.010 250);

    --ink: oklch(93% 0.004 250);
    --ink-soft: oklch(72% 0.006 250);
    --ink-faint: oklch(56% 0.006 250);

    --signal: oklch(66% 0.20 25);
    --signal-weak: oklch(56% 0.11 25);
    --on-signal: oklch(14% 0.01 25);

    --tier-1-soft: oklch(27% 0.06 25);
    --tier-1-edge: oklch(45% 0.13 25);
    --tier-2-soft: oklch(24% 0.035 25);
    --tier-2-edge: oklch(38% 0.07 25);
    --tier-3: oklch(70% 0.008 250);
    --tier-3-soft: oklch(24% 0.006 250);
    --tier-3-edge: var(--line-strong);
    --tier-0: oklch(55% 0.005 250);

    --maru: oklch(70% 0.14 155);
    --maru-soft: oklch(25% 0.045 155);
    --sankaku: oklch(76% 0.11 75);
    --sankaku-soft: oklch(26% 0.04 75);
    --batsu-soft: oklch(27% 0.06 25);
  }
}

/* 閲覧者が明示的に切り替えたときは、OS設定より優先する */
:root[data-theme="light"] {
  color-scheme: light;
  --paper: oklch(96.6% 0.002 250);
  --paper-sunk: oklch(93.6% 0.003 250);
  --surface: oklch(100% 0 0);
  --surface-raised: oklch(100% 0 0);
  /* 罫線はやや弱く。区切りの役目は、地と面の明度差にも分担させる */
  --line: oklch(87% 0.005 250);
  --line-strong: oklch(78% 0.006 250);
  /*
   * 触れる部品（入力欄・ボタン・選択肢）の枠。装飾の罫線とは別に持つ。
   * 「どこが入力欄か」は輪郭でしか分からないので、ここだけは薄くできない。
   * WCAG 1.4.11 の基準3.0に対して、白地で3.4・紙地で3.1。
   */
  --line-field: oklch(64% 0.008 250);
  --ink: oklch(16% 0.01 250);
  --ink-soft: oklch(45% 0.008 250);
  --ink-faint: oklch(60% 0.006 250);
  --signal: oklch(48% 0.23 23);
  --signal-weak: oklch(62% 0.14 23);
  --on-signal: oklch(99% 0 0);
  --tier-1-soft: oklch(95.5% 0.03 23);
  --tier-1-edge: oklch(72% 0.14 23);
  --tier-2-soft: oklch(96.5% 0.02 23);
  --tier-2-edge: oklch(82% 0.08 23);
  --tier-3: oklch(45% 0.01 250);
  --tier-3-soft: oklch(95% 0.003 250);
  --tier-0: oklch(62% 0.004 250);
  --maru: oklch(45% 0.13 155);
  --maru-soft: oklch(95% 0.04 155);
  --sankaku: oklch(55% 0.12 75);
  --sankaku-soft: oklch(95.5% 0.04 75);
  --batsu-soft: oklch(95.5% 0.03 23);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: oklch(18% 0.008 250);
  --paper-sunk: oklch(14% 0.008 250);
  --surface: oklch(23.5% 0.008 250);
  --surface-raised: oklch(26% 0.008 250);
  --line: oklch(32% 0.008 250);
  --line-strong: oklch(41% 0.009 250);
  --line-field: oklch(58% 0.010 250);
  --ink: oklch(93% 0.004 250);
  --ink-soft: oklch(72% 0.006 250);
  --ink-faint: oklch(56% 0.006 250);
  --signal: oklch(66% 0.20 25);
  --signal-weak: oklch(56% 0.11 25);
  --on-signal: oklch(14% 0.01 25);
  --tier-1-soft: oklch(27% 0.06 25);
  --tier-1-edge: oklch(45% 0.13 25);
  --tier-2-soft: oklch(24% 0.035 25);
  --tier-2-edge: oklch(38% 0.07 25);
  --tier-3: oklch(70% 0.008 250);
  --tier-3-soft: oklch(24% 0.006 250);
  --tier-0: oklch(55% 0.005 250);
  --maru: oklch(70% 0.14 155);
  --maru-soft: oklch(25% 0.045 155);
  --sankaku: oklch(76% 0.11 75);
  --sankaku-soft: oklch(26% 0.04 75);
  --batsu-soft: oklch(27% 0.06 25);
}