/**
 * =====================================================
 * horomusume.net - デザイントークン
 * =====================================================
 * 
 * 【概要】
 * 全フィルターツールで共通使用するCSS変数（デザイントークン）を定義。
 * 
 * 【配色ベース】
 * - 基本デザイン: player_filter
 * - セットA/Bカラー: kijin-filter
 * 
 * 【使用方法】
 * @import '/css/shared/design-tokens.css';
 * または
 * <link rel="stylesheet" href="/css/shared/design-tokens.css">
 */

:root {
  /* ========================================
       ブランドカラー (3色パレット)
       Primary: 青 - メインアクション
       Accent: オレンジ - 強調・CTA
       Neutral: グレー - 補助・リセット
       ======================================== */
  --brand-primary: #1d4ed8;
  --brand-primary-hover: #1e40af;
  --brand-primary-light: #dbeafe;
  
  --brand-accent: #f59e0b;
  --brand-accent-hover: #d97706;
  --brand-accent-light: #fef3c7;
  
  --brand-neutral: #6b7280;
  --brand-neutral-hover: #4b5563;
  --brand-neutral-light: #f3f4f6;

  /* ========================================
       ボタンカラー（ブランドカラーを使用）
       ======================================== */
  --btn-primary-bg: var(--brand-primary);
  --btn-primary-hover: var(--brand-primary-hover);
  
  --btn-accent-bg: var(--brand-accent);
  --btn-accent-hover: var(--brand-accent-hover);
  
  --btn-neutral-bg: var(--brand-neutral);
  --btn-neutral-hover: var(--brand-neutral-hover);

  /* ========================================
       プライマリカラー (Blue系) - 後方互換
       player_filter基準
       ======================================== */
  --c-primary: #1d4ed8; /* Tailwind blue-700 */
  --c-primary-hover: #1e40af; /* Tailwind blue-800 */
  --c-primary-light: #dbeafe; /* Tailwind blue-100 */
  --c-primary-border: #93c5fd; /* Tailwind blue-300 */
  --c-primary-text: #1e3a8a; /* Tailwind blue-900 */

  /* ========================================
       セットA カラー (Blue系)
       kijin-filter基準 - 青系統
       ======================================== */
  --c-set-a-bg: #dbeafe; /* blue-100 */
  --c-set-a-bg-hover: #bfdbfe; /* blue-200 */
  --c-set-a-border: #93c5fd; /* blue-300 */
  --c-set-a-text: #1e40af; /* blue-800 */
  --c-set-a-text-dark: #1e3a8a; /* blue-900 */

  /* ========================================
       セットB カラー (Red系)
       kijin-filter基準 - 赤系統
       ======================================== */
  --c-set-b-bg: #fee2e2; /* red-100 */
  --c-set-b-bg-hover: #fecaca; /* red-200 */
  --c-set-b-border: #fca5a5; /* red-300 */
  --c-set-b-text: #991b1b; /* red-800 */
  --c-set-b-text-dark: #7f1d1d; /* red-900 */

  /* ========================================
       セマンティックカラー（状態表示用）
       ======================================== */
  --c-success: #047857; /* emerald-700（白文字コントラスト5.92:1、旧#10b981は2.54:1でAA不合格） */
  --c-success-hover: #065f46; /* emerald-800 */
  --c-success-light: #d1fae5; /* emerald-100 */

  --c-error: #dc2626; /* red-600（白文字コントラスト4.83:1、旧#ef4444は3.76:1でAA不合格） */
  --c-error-hover: #b91c1c; /* red-700 */

  --c-warning: #f59e0b; /* amber-500 */
  --c-warning-hover: #d97706; /* amber-600 */

  --c-info: #3b82f6; /* blue-500 */
  --c-info-hover: #2563eb; /* blue-600 */

  /* semantic light（バッジ/注記の淡い背景。--c-success-light は上で定義済み。R2補強） */
  --c-error-light: #fee2e2; /* red-100 */
  --c-warning-light: #fef3c7; /* amber-100 */
  --c-info-light: #dbeafe; /* blue-100 */

  /* ========================================
       グレースケール / 背景
       ======================================== */
  --c-bg: #ffffff; /* white */
  --c-bg-card: #ffffff;
  --c-bg-alt: #f9fafb; /* gray-50 */
  --c-bg-hover: #eef2ff; /* indigo-50 */
  --c-bg-header: #f9fafb; /* gray-50 */

  /* ========================================
       テキスト
       ======================================== */
  --c-text: #374151; /* gray-700 */
  --c-text-sub: #6b7280; /* gray-500 */
  --c-text-muted: #6e7583; /* WCAG AA 4.88:1 on white */

  /* ========================================
       ボーダー / セパレーター
       ======================================== */
  --c-border: #e5e7eb; /* gray-200 */
  --c-border-strong: #d1d5db; /* gray-300 */

  /* ========================================
       フォーカス / インタラクション
       ======================================== */
  --c-focus-ring: #1d4ed8; /* brand-primary と統一 */
  --c-focus-shadow: rgba(29, 78, 216, 0.3); /* brand-primary 30% */
  --c-overlay: rgba(0, 0, 0, 0.3);

  /* ========================================
       スクロールバー
       ======================================== */
  --c-scrollbar-track: #f1f1f1;
  --c-scrollbar-thumb: #c1c1c1;
  --c-scrollbar-thumb-hover: #a1a1a1;

  /* ========================================
       テキスト（拡張）
       ======================================== */
  --c-text-dark: #000000; /* pure black — 見出し・ブランド */

  /* ========================================
       スペーシング
       ======================================== */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */

  /* ========================================
       ボーダー半径
       ======================================== */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  /* UI統一プロジェクト Phase2 で追加。チップ/ピルは 999px と 9999px の
     表記ゆれがあったため統一。円形要素は 50% 直書きが散在していたため
     命名して参照先を明確にする */
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* ========================================
       シャドウ
       ======================================== */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

  /* ========================================
       トランジション
       ======================================== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ========================================
       レタースペーシング（Geist風）
       ======================================== */
  --letter-spacing-tight: -0.02em; /* 見出し（18px以上） */
  --letter-spacing-normal: 0;      /* 本文（デフォルト） */
  --letter-spacing-wide: 0.01em;   /* 小文字ラベル・キャプション（12px以下） */

  /* ========================================
       フォント
       ======================================== */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px — 大見出し（R2補強） */
  --font-size-3xl: 1.75rem; /* 28px — ページ見出し（R2補強） */
  /* UI統一プロジェクト Phase2 で追加。h2が14〜26pxにばらついていた問題への対応。
     新しい値は起こさず、既存の --font-size-xl / --font-size-2xl に意味名で
     エイリアスするのみ（読み物系ページと高密度ツール系ページで階層を分ける） */
  --font-size-heading-tool: var(--font-size-xl);      /* 20px。データツール系ページのh2 */
  --font-size-heading-editorial: var(--font-size-2xl); /* 24px。読み物系ページ（診断LP等）のh2 */

  /* ========================================
       行高（黄金比ベース）
       ======================================== */
  --line-height-tight: 1.3; /* 見出し・カードタイトル */
  --line-height-normal: 1.618; /* 本文・説明文（φ） */
  --line-height-dense: 1.25; /* テーブルセル・密集データ */

  /* ========================================
       Z-Index スケール
       ======================================== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-toast: 700;
  --z-max: 9999;

  /* ========================================
       セクションリズム（φ比 vertical rhythm）
       ======================================== */
  --section-gap-lg: 42px; /* セクション間マージン */
  --section-pad-lg: 26px; /* セクション内パディング（42/φ） */
  --section-gap-md: 32px; /* 中セクション間 */
  --section-pad-md: 20px; /* 中セクション内（32/φ） */

  /* ========================================
       タッチターゲットサイズ（人間工学ベース）
       ======================================== */
  --touch-target-lg: 56px;   /* Primary action (MIT Touch Lab推奨上限) */
  --touch-target-md: 48px;   /* Secondary action (Material Design推奨) */
  --touch-target-sm: 44px;   /* Tertiary action (Apple HIG最小値) */
  --touch-spacing: 8px;      /* ボタン間最小間隔（誤タップ防止） */

  /* ========================================
     セマンティックエイリアス
     新規CSSで使用推奨。既存の --c-* / --brand-* も引き続き有効。
     ダークモード時は参照先が自動切替されるため追加定義不要。
     ======================================== */
  --horo-primary: var(--brand-primary);
  --horo-surface: var(--c-bg);
  --horo-text: var(--c-text);
  --horo-border: var(--c-border);
  --horo-accent: var(--brand-accent);

  /* ========================================
     ツール色（cp-r4v8q1w 管理画面の散在 hardcode を集約）
     Phase 5 で導入。以後はこれを var(--color-xxx) で参照する
     ======================================== */
  --color-tsukumo: #3b82f6;
  --color-kijin:   #10b981;
  --color-eiketsu: #8b5cf6;
  --color-jinpo:   #ef4444;
  --color-player:  #f59e0b;
  --color-kashin:  #06b6d4;
  --color-world:   #6366f1;

  /* ========================================
     管理画面サイドバー（常時ダーク基調）
     ライト/ダークで切り替えず一貫させる（GitHub/Linear と同じ慣行）
     ======================================== */
  --sidebar-bg:          #0a0a0a;
  --sidebar-border:      #27272a;
  --sidebar-text:        #a1a1aa;
  --sidebar-text-active: #ffffff;
  --sidebar-group-label: #71717a;

  /* ========================================
     フォーカスリング（キーボード操作時の視覚フィードバック）
     a11y 必須項目。全 button/a に :focus-visible で適用する
     ======================================== */
  --focus-ring: #3b82f6;
}

/* =====================================================
   ダークモード: OS設定に自動追従（手動で "light" 指定時は除外）
   ===================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #111827;
    --c-bg-card: #1f2937;
    --c-bg-alt: #1f2937;
    --c-bg-hover: #374151;
    --c-bg-header: #1f2937;
    --c-text: #e5e7eb;
    --c-text-sub: #9ca3af;
    --c-text-muted: #9ca3af;
    --c-text-dark: #f9fafb;
    --c-border: #374151;
    --c-border-strong: #4b5563;
    --brand-neutral-light: #374151;
    --c-overlay: rgba(0, 0, 0, 0.7);
    --c-scrollbar-track: #374151;
    --c-scrollbar-thumb: #4b5563;
    --c-scrollbar-thumb-hover: #6b7280;
  }
}

/* =====================================================
   ダークモード: 手動設定（localStorage "horo-theme": "dark"）
   ===================================================== */

[data-theme="dark"] {
  --c-bg: #111827;
  --c-bg-card: #1f2937;
  --c-bg-alt: #1f2937;
  --c-bg-hover: #374151;
  --c-bg-header: #1f2937;
  --c-text: #e5e7eb;
  --c-text-sub: #9ca3af;
  --c-text-muted: #9ca3af;
  --c-text-dark: #f9fafb;
  --c-border: #374151;
  --c-border-strong: #4b5563;
  --brand-neutral-light: #374151;
  --c-overlay: rgba(0, 0, 0, 0.7);
  --c-scrollbar-track: #374151;
  --c-scrollbar-thumb: #4b5563;
  --c-scrollbar-thumb-hover: #6b7280;
}