/*
 * Evolution Chronicle（開発名） visual design tokens
 * 主担当: Claude Code (visual presentation)
 *
 * ここは見た目の定義だけを持つ。gameplay値、価格、能力値、進行判定を書かない。
 * 状態名（confirmed / provisional / recovery / saving / locked / available / owned）は
 * Codex CLI側の契約に登場する状態を表示するための class 名であり、
 * presentation 側で状態を再導出しないこと。
 *
 * 章1「魚類の海」を想定した低詳細度の暫定 direction。
 * 公開 art direction と公開 logo は未確定であり、ここでは扱わない。
 */

:root {
  /* ---- surface / depth ---------------------------------------------- */
  --ec-bg: #0a1120;
  --ec-bg-deep: #060b15;
  --ec-surface-1: #121c2c;
  --ec-surface-2: #1a2637;
  --ec-surface-3: #223145;
  --ec-line: #2e3f57;
  --ec-line-strong: #4a5f7d;

  /* ---- text -------------------------------------------------------- */
  --ec-text: #e9eff8;
  --ec-text-muted: #a6b7cd;
  --ec-text-dim: #7e91aa;
  --ec-text-on-accent: #07101d;

  /* ---- 適応P の残高区分 ---------------------------------------------
   * 4 区分は合算表示せず、色・icon・枠線様式・文言の 4 重で区別する。
   * 色だけに依存しないことを満たすため、色と icon と border-style を必ず対で使う。
   */
  --ec-confirmed: #6ee7b7;
  --ec-confirmed-dim: #1d4a3c;
  --ec-provisional: #fbbf24;
  --ec-provisional-dim: #4d3a0d;
  --ec-recovery: #c4b5fd;
  --ec-recovery-dim: #372d5c;
  --ec-saving: #93c5fd;
  --ec-saving-dim: #1d3557;

  /* ---- 所有状態（部位 family / 体格 tier） -------------------------- */
  --ec-owned: #6ee7b7;
  --ec-available: #fbbf24;
  --ec-locked: #7e91aa;

  /* ---- 危険 / 安全 / 仲間 ------------------------------------------- */
  --ec-danger: #fb7185;
  --ec-danger-dim: #4a1d28;
  --ec-safe: #5eead4;
  --ec-ally: #7dd3fc;

  /* ---- focus ------------------------------------------------------- */
  --ec-focus: #ffd166;
  --ec-focus-contrast: #07101d;
  --ec-focus-ring-width: 3px;
  --ec-focus-ring-offset: 2px;

  /* ---- type -------------------------------------------------------- */
  --ec-font-ui: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  --ec-font-num: "SF Mono", ui-monospace, "Roboto Mono", Menlo, monospace;

  /* 文字拡大 100〜200% に耐えるため、px 固定値ではなく rem 基準にする */
  --ec-fs-caption: 0.75rem;
  --ec-fs-body: 0.875rem;
  --ec-fs-label: 1rem;
  --ec-fs-title: 1.25rem;
  --ec-fs-headline: 1.5rem;
  --ec-fs-num-sm: 1.125rem;
  --ec-fs-num-lg: 1.75rem;

  --ec-lh-tight: 1.25;
  --ec-lh-body: 1.6;

  --ec-fw-normal: 400;
  --ec-fw-medium: 600;
  --ec-fw-bold: 700;

  /* ---- spacing（4px 基準） ------------------------------------------ */
  --ec-sp-1: 0.25rem;
  --ec-sp-2: 0.5rem;
  --ec-sp-3: 0.75rem;
  --ec-sp-4: 1rem;
  --ec-sp-5: 1.5rem;
  --ec-sp-6: 2rem;
  --ec-sp-7: 3rem;

  /* ---- shape ------------------------------------------------------- */
  --ec-radius-sm: 4px;
  --ec-radius-md: 8px;
  --ec-radius-lg: 12px;
  --ec-border-w: 1px;
  --ec-border-w-strong: 2px;

  /* ---- elevation --------------------------------------------------- */
  --ec-shadow-panel: 0 6px 24px rgba(3, 8, 16, 0.55);
  --ec-shadow-dialog: 0 12px 40px rgba(3, 8, 16, 0.7);

  /* ---- motion（軽減設定で 0 に落とす） ------------------------------ */
  --ec-dur-fast: 120ms;
  --ec-dur-base: 200ms;
  --ec-dur-slow: 360ms;
  --ec-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/*
 * motion 軽減。
 * OS 設定と、Codex CLI 側 accessibility state から付与される
 * [data-ec-reduced-motion="on"] の両方を尊重する。
 * presentation 側では設定 state を保持せず、付与された属性へ反応するだけにする。
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ec-dur-fast: 0ms;
    --ec-dur-base: 0ms;
    --ec-dur-slow: 0ms;
  }
}

[data-ec-reduced-motion="on"] {
  --ec-dur-fast: 0ms;
  --ec-dur-base: 0ms;
  --ec-dur-slow: 0ms;
}

/* 文字拡大 125% / 150% / 200%。root font-size を変えて rem 全体を追随させる */
[data-ec-text-scale="125"] { font-size: 125%; }
[data-ec-text-scale="150"] { font-size: 150%; }
[data-ec-text-scale="200"] { font-size: 200%; }

/* 高コントラスト寄りの調整。色以外の手掛かりは常時出しているため、境界線を強める */
[data-ec-contrast="high"] {
  --ec-surface-1: #0a1220;
  --ec-surface-2: #101b2b;
  --ec-line: #6d84a3;
  --ec-line-strong: #a9bcd6;
  --ec-text-muted: #cddbec;
  --ec-text-dim: #b3c4d8;
  --ec-border-w: 2px;
}