/* AI研修.com デザイントークン — Deep Navy × Intelligent Teal
 *
 * 色は「役割」で定義する。役割を跨いだ使い方（見出しをTealにする、全バッジを
 * ブランド色にする、警告にブランド色を使う等）はしない。
 *
 *   surface   面   … 画面の大半。White / Light gray-blue / Soft teal を交互に使う
 *   text      文字 … 見出し・本文・補助文。既定は Navy 系
 *   border    線   … カード枠・区切り
 *   action    行動 … Primary CTA・選択中・アクティブ・進捗・比較・診断
 *   brand     識別 … ブランドを示すTeal。枠線・アイコン・大きな文字・装飾
 *   ai        AI   … AI相談 / AIチャット / AI専用機能だけに使う補助のCyan
 *   semantic  状態 … ok / warn / danger。ブランド色とは必ず分ける
 *
 * 画面全体の目安比率： Neutral 約70% / Navy 約20% / Teal 約8% / Cyan 約2%
 *
 * ロゴに含まれるオレンジはロゴ画像の中だけで使う。UIのPrimaryは Teal / Navy。
 */
:root {
  /* ============================================================
   * SURFACE — 面
   * 全部を白にせず White → Light gray-blue → White → Soft teal の
   * リズムでセクション背景を切り替える。
   * ============================================================ */
  --c-surface: #FFFFFF;
  --c-bg: #F7FAFC;
  --c-surface-soft: #EAF7F5;
  --c-surface-ai: #E7F9F8;
  --c-surface-muted: #F1F5F8;
  --c-dark: #0B2533;          /* フッター・締めのダークセクション */

  /* ============================================================
   * TEXT — 文字
   * ============================================================ */
  --c-ink: #102A43;           /* 見出し・強い文字        白地 14.6:1 */
  --c-ink-body: #1E3A50;      /* 本文                    白地 11.4:1 */
  --c-ink-sub: #587083;       /* 補助文・キャプション    白地  5.2:1 */
  --c-ink-faint: #8C9BA6;     /* disabled・装飾のみ（本文に使わない） */
  --c-on-dark: #FFFFFF;
  --c-on-dark-sub: #B9CBD4;

  /* ============================================================
   * BORDER — 線
   * ============================================================ */
  --c-border: #D9E5E8;
  --c-border-strong: #BBD0D6;
  --c-border-accent: #B6E1DD;  /* Teal寄りの枠（hover・選択中） */

  /* ============================================================
   * BRAND / ACTION — Teal
   * コントラストで2系統に分ける（WCAG AA / 白との比）:
   *   brand  #0A9F95 = 3.3:1 → 枠線・アイコン・装飾・24px以上の見出し専用
   *   action #087D76 = 5.0:1 → 白文字を載せる塗り、白地に置くTealの文字
   * 小さな文字に brand を使わない。
   * ============================================================ */
  --c-brand: #0A9F95;
  --c-brand-deep: #0A8B82;
  --c-action: #087D76;
  --c-action-hover: #066962;
  --c-action-text: #066A63;    /* 白地に置くTealの文字 */
  --c-action-soft: #EAF7F5;    /* 選択中・おすすめの淡い面 */
  --c-on-action: #FFFFFF;

  /* ============================================================
   * AI — Cyan（AI相談 / AIチャット / AI専用機能のみ。全体の約2%）
   * Cyanは本文色にしない。Cyanの面に載せる文字は Navy。
   * ============================================================ */
  --c-ai: #43C6C1;
  --c-ai-deep: #12B3A8;
  --c-ai-soft: #E7F9F8;
  --c-on-ai: #102A43;

  /* ============================================================
   * SEMANTIC — 状態（ブランド色と混ぜない）
   * 色だけで状態を伝えず、必ず文言・記号を併用する。
   * ============================================================ */
  --c-ok: #168567;
  --c-warn: #C47A22;
  --c-warn-text: #9A5E15;      /* 白地に置く警告の文字（AA） */
  --c-danger: #C94B55;
  --c-danger-soft: #FDECEE;   /* 必須・エラーの淡い面 */
  --c-gold: #B8860B;           /* 評価の星・最上位レベルの少量アクセント */

  /* ============================================================
   * CTA / 影 / FV
   * ============================================================ */
  --gradient-accent-cta: linear-gradient(100deg, #0A8B82 0%, #066962 100%);
  --gradient-accent-cta-hover: linear-gradient(100deg, #07756E 0%, #055349 100%);
  --shadow-accent-cta: 0 8px 20px rgba(8, 125, 118, .22);
  --gradient-fv: linear-gradient(135deg, #F7FAFC 0%, #FFFFFF 50%, #EAF7F5 100%);

  /* ============================================================
   * BUTTON — 4区分。hover で寸法（padding / border-width / font-size）を変えない
   * ============================================================ */
  /* Primary   : Teal塗り / 白文字。1画面の主行動に使う */
  --btn-primary-bg: var(--c-action);
  --btn-primary-bg-hover: var(--c-action-hover);
  --btn-primary-text: var(--c-on-action);
  /* Secondary : 白背景 / Navy文字 / 中立の枠 */
  --btn-secondary-bg: var(--c-surface);
  --btn-secondary-bg-hover: var(--c-action-soft);
  --btn-secondary-text: var(--c-ink);
  --btn-secondary-border: var(--c-border);
  /* Ghost     : 透過 / Navy文字 */
  --btn-ghost-text: var(--c-ink);
  --btn-ghost-bg-hover: var(--c-surface-muted);
  --btn-ghost-border: var(--c-border);
  /* AI        : AI専用導線だけ。Cyan塗り + Navy文字で通常CTAと区別する */
  --btn-ai-bg: var(--c-ai);
  --btn-ai-bg-hover: var(--c-ai-deep);
  --btn-ai-text: var(--c-on-ai);
  /* Disabled  : 中立グレー。色だけでなく cursor と aria でも状態を伝える */
  --btn-disabled-bg: #EEF2F5;
  --btn-disabled-text: #8C9BA6;
  --btn-disabled-border: #D9E5E8;

  /* --------------------------------------------------------------
   * 互換エイリアス。既存コンポーネントが参照している旧トークン名を
   * 上の役割トークンへ委譲する。新規実装では --c-* を使うこと。
   *   accent / cta -> ACTION（Teal）
   *   primary      -> NAVY（情報）
   *   cyan         -> AI（Cyan）
   * -------------------------------------------------------------- */
  --color-accent: var(--c-action);
  --color-accent-hover: var(--c-action-hover);
  --color-accent-strong: var(--c-brand);
  --color-accent-deep: var(--c-action-text);   /* 主に文字色として使われているため AA 側へ */
  --color-accent-bg: var(--c-action-soft);
  --color-accent-border: var(--c-border-accent);

  --color-cta: var(--c-action);
  --color-cta-hover: var(--c-action-hover);

  --color-navy: var(--c-ink);
  --color-navy-dark: var(--c-dark);
  --color-navy-soft: #2E4A61;
  --color-navy-muted: var(--c-ink-sub);
  --color-navy-light: #EDF3F7;
  --color-navy-border: var(--c-border);

  --color-primary: #2E4A61;
  --color-primary-hover: #26415A;
  --color-primary-dark: #1E3A50;

  --color-cyan: var(--c-ai);
  --color-cyan-dark: var(--c-ai-deep);

  --color-bg-page: var(--c-bg);
  --color-bg-blue: var(--c-bg);
  --color-bg-cyan: var(--c-surface-soft);
  --color-surface: var(--c-surface);
  --color-border: var(--c-border);
  --color-border-strong: var(--c-border-strong);
  --color-text: var(--c-ink-body);
  --color-text-muted: var(--c-ink-sub);
  --color-muted: var(--c-ink-sub);
  --color-white: #FFFFFF;
  --color-bg: var(--c-surface);
  --color-bg-soft: var(--c-bg);
  --color-bg-strong: var(--c-surface-soft);

  --color-success: var(--c-ok);
  --color-warning: var(--c-warn);
  --color-warn: var(--c-warn);
  --color-danger: var(--c-danger);
  --color-gold: var(--c-gold);
  --color-gold-soft: #D6B778;

  /* 旧Greenトークン（前世代）の受け皿。Tealへ委譲する。 */
  --color-green: var(--c-action);
  --color-green-bright: var(--c-brand);
  --color-green-hover: var(--c-action-hover);
  --color-green-dark: var(--c-action-text);
  --color-green-deep: var(--c-brand-deep);
  --color-green-strong: var(--c-brand);
  --color-green-light: var(--c-action-soft);
  --color-green-pale: #F0F9F8;
  --color-green-border: var(--c-border-accent);

  /* 旧Yellowトークンの受け皿。「おすすめ」はSoft tealへ、goldは星と最上位のみ。 */
  --color-yellow: var(--c-ai);
  --color-yellow-strong: var(--c-gold);
  --color-yellow-light: var(--c-action-soft);
  --color-yellow-pale: var(--c-ai-soft);
  --color-yellow-border: var(--c-border-accent);
  --color-yellow-text: var(--c-action-text);

  /* Interactive card motion */
  --interactive-card-hover-scale: 1.015;
  --interactive-card-motion-duration: 180ms;
  --interactive-card-motion-ease: cubic-bezier(.2, .8, .2, 1);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(
    .homeTrainingSearch__filter-card,
    .area-search__card,
    .recommend-card,
    .training-category-section__card,
    .weekly-ranking__item,
    .shared-training-card,
    .popular-training-card,
    .mock-training-card > a,
    .mock-article-card > a,
    .tb-cases-track > li > a,
    .maturity-option,
    .rv-scores__card,
    [data-card-selectable]
  ),
  .diagnosis-option__surface {
    position: relative;
    z-index: 0;
    scale: 1;
    transform-origin: center;
    transition: border-color var(--interactive-card-motion-duration) var(--interactive-card-motion-ease),
      background-color var(--interactive-card-motion-duration) var(--interactive-card-motion-ease),
      box-shadow var(--interactive-card-motion-duration) var(--interactive-card-motion-ease),
      opacity var(--interactive-card-motion-duration) var(--interactive-card-motion-ease),
      transform var(--interactive-card-motion-duration) var(--interactive-card-motion-ease),
      scale var(--interactive-card-motion-duration) var(--interactive-card-motion-ease) !important;
  }

  :is(
    .homeTrainingSearch__filter-card,
    .area-search__card,
    .recommend-card,
    .training-category-section__card,
    .weekly-ranking__item,
    .shared-training-card,
    .popular-training-card,
    .mock-training-card > a,
    .mock-article-card > a,
    .tb-cases-track > li > a,
    .maturity-option,
    .rv-scores__card,
    [data-card-selectable]
  ):hover,
  .diagnosis-option:hover .diagnosis-option__surface {
    z-index: 2;
    scale: var(--interactive-card-hover-scale);
    transform: none !important;
  }

  .recommend-card:hover .recommend-card__media > img,
  .shared-training-card:hover .shared-training-card__media > img,
  .fv-search-comparison__comparison-card:hover .fv-search-comparison__comparison-media > img {
    transform: none !important;
  }
}