/**
 * Delta v5 design tokens.
 * Values are ported as-is from TOKENS.md (black-mode.css derived) — no new colors.
 * See: .claude/skills/delta-ui-check/TOKENS.md
 */

:root {
  --v5-bg: #141414;            /* 確定v1 */
  --v5-surface: #1f1f1f;
  --v5-text: #e5e5e5;
  --v5-text-muted: #b3b3b3;
  --v5-text-faint: #8a8a8a;

  --v5-border: #262626;
  --v5-border-strong: #3a3a3a;   /* outline buttons */

  /* Semantic chrome tokens (drive light/dark theming; sampled from spa.css). */
  --v5-heading: #fff;                    /* pure-white headings on page bg */
  --v5-nav-bg: rgba(20, 20, 20, .95);    /* sticky nav backdrop */
  --v5-avatar-grad-a: #3a3a3a;           /* review avatar placeholder */
  --v5-avatar-grad-b: #1d1d1d;

  --v5-accent-gold: #d4af37;     /* 確定v1: ティアバッジ専用（ブランドアクセント撤退） */
  --v5-accent-blue: #5bbfef;     /* 移行中: A/Cページの旧選択状態のみ（Phase2で退役） */

  /* 確定v1 (2026-07-10): ブランド青=ロゴ実色・CTA/選択線/リンクはテーマで反転 */
  --v5-brand-blue: #3399ff;      /* ロゴ・構造線のみ（面塗り禁止） */
  --v5-sel-line: #3399ff;        /* 選択/現在地の2px下線 */
  --v5-cta-bg: #fff;             /* CTAピル地 */
  --v5-cta-ink: #111;            /* CTAピル文字 */
  --v5-link-v1: #fff;            /* リンク文字（ダークは下線で示す） */
  --v5-link-deco: #555;          /* リンク下線色 */

  --v5-cta: #06f;                /* 白地チップ上のリンク等・「白地の上」専用 */
  --v5-cta-hover: #1b7fcc;
  --v5-link: #fff;               /* 確定v1: ダークのリンクは白（下線は各コンポーネントで） */
  --v5-link-hover: #b3b3b3;
  --v5-on-bg: #fff;              /* 確定v1: 選択状態の塗り（白ピル） */
  --v5-on-ink: #111;

  --v5-tier-gold: #c98910;
  --v5-tier-platinum: #ccc2c2;
  --v5-tier-silver: #a8a8a8;

  --v5-warning: #c00;
  --v5-star: #c90;

  --v5-radius-sm: 2px;
  --v5-radius-md: 6px;

  --v5-font: 12px "ヒラギノ丸ゴ Pro W4", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, sans-serif;

  /**
   * Structure tokens (Runway DESIGN.md principles, shared with v3).
   * Not colors — layout/depth: no shadows (depth via spacing, not chrome),
   * media-is-the-UI, a generative spacing scale, and a clear type scale.
   */
  --v5-shadow: none;

  --v5-space-section: clamp(48px, 6vw, 78px);
  --v5-space-lg: 24px;
  --v5-space-md: 14px;
  --v5-space-sm: 8px;

  --v5-font-size-display: clamp(28px, 4vw, 48px);
  --v5-font-size-title: 20px;
  --v5-font-size-body: 14px;
  --v5-font-size-label: 12px;
  --v5-font-size-micro: 11px;
  --v5-line-height-tight: 1.1;

  /* 役割別の型スケール確定v1（2026-07-16 ユーザー承認）。
     「同じ役割はページ間で同一サイズ」を保証する正準。全 .vue/.css はこの変数のみ使用し、
     px直書きを禁止。装飾数値(ランク番号/スコア等)は文字役割でないため対象外。 */
  --v5-fs-h1: clamp(21px, 2.3vw, 28px); /* ページ主タイトル(作品名/一覧見出し) */
  --v5-fs-h2: 18px;   /* セクション見出し(節タイトル) */
  --v5-fs-h3: 15px;   /* 小見出し・カード群見出し・サイドバー見出し */
  --v5-fs-control: 14px; /* ボタン/タブ等の操作要素 */
  --v5-fs-body: 13px; /* 本文・リスト行・テーブル(密度維持) */
  --v5-fs-label: 12px; /* ラベル・小型ボタン・補助 */
  --v5-fs-micro: 11px; /* バッジ・キャプション・注記 */
}

/**
 * White (light) theme — same palette, neutral ramp inverted by lightness.
 * Brand accents (gold / blue / cta / link / tier / star / warning / green) are
 * kept identical. Media chrome (player, mini-player, scrims, poster overlays)
 * stays dark because the media is the UI. Toggle: body.v5-light.
 */
.v5-light {
  /* 確定v1 W4: 現行本番のライトトークン（白×青一本 #06F） */
  --v5-bg: #f1f1f1;
  --v5-surface: #fff;
  --v5-text: #333;
  --v5-text-muted: #555;
  --v5-text-faint: #666666;
  --v5-border: #ddd;
  --v5-border-strong: #ddd;
  --v5-star: #7a5c00;            /* a11y: 星ライトは白地で#c90(≈2.6)が不足→#7a5c00(6.25) */

  --v5-heading: #222;
  --v5-nav-bg: rgba(255, 255, 255, .95);
  --v5-avatar-grad-a: #e0e0e0;
  --v5-avatar-grad-b: #cfcfcf;

  --v5-sel-line: #06f;
  --v5-cta-bg: #06f;
  --v5-cta-ink: #fff;
  --v5-link: #0057e7;            /* a11y: リンク文字は#06f(4.28)がAA僅か不足→#0057e7(5.29) */
  --v5-link-hover: #0057e7;
  --v5-on-bg: #06f;
  --v5-on-ink: #fff;
  --v5-link-v1: #0057e7;
  --v5-link-deco: transparent;   /* ライトは色で示す（下線なし） */
}