/**
 * Design Tokens (CSS Variables)
 *
 * v1.4 §2.1 のトークン構造を維持しつつ、Design System v1.2 (確定版) の値を反映。
 *
 * 【Phase 4 反映状況】
 *
 * - 既存変数 (--jj-primary, --jj-radius-md 等) の値を Phase 1 仮値から
 *   Design System v1.2 の正値に更新済み。変数名は無修正のため、
 *   Phase 1-3.5 の CSS は変数参照を介して自動追従する (再書換え不要)。
 *
 * - Design System v1.2 ソース (design-source/tokens.css および top-page-v12.css) は
 *   --jj-blue / --jj-orange / --jj-r-md / --jj-text 等の命名を使うため、
 *   本ファイル末尾でエイリアス層を提供し、Mock CSS をそのまま移植可能にする。
 *
 * @package JobJepang
 * @version 1.1.0 (Phase 4 — DS v1.2 反映)
 */

:root {
  /* ============================================================
     COLORS
     ============================================================ */

  /* Primary (JobJepang ブルー) */
  --jj-primary: #0072B1;
  --jj-primary-dark: #005a8e;
  --jj-primary-light: #4d9dcd;
  --jj-primary-bg-light: rgba(0, 114, 177, 0.04);

  /* Accent (オレンジ — 装飾・見出し下線・小さなアクセントに使用)
     注: 白文字を乗せる CTA 背景としては #FF6B35 はコントラスト 3.1:1 で AA 未達。
         CTA 背景には下記の --jj-cta-bg / --jj-cta-bg-hover を使う。
         この --jj-accent / --jj-accent-dark は装飾系の値として温存する。 */
  --jj-accent: #FF6B35;
  --jj-accent-dark: #e55a2b;

  /* CTA 背景専用 (v1.2.6 — Lighthouse a11y 改善)
     白文字 (--jj-text-on-primary) を乗せた時の WCAG コントラスト:
       --jj-cta-bg       = #C2410C  →  約 5.18:1 (AA Pass, normal text)
       --jj-cta-bg-hover = #9A3412  →  約 7.31:1 (AAA, hover は標準的な「より暗く」)
     ブランドオレンジ #FF6B35 はそのまま装飾用 (--jj-accent) として維持。 */
  --jj-cta-bg:       #C2410C;
  --jj-cta-bg-hover: #9A3412;

  /* Background */
  --jj-bg-white: #ffffff;
  --jj-bg-card: #f8fafc;
  --jj-bg-section: #f1f5f9;
  --jj-bg-section-alt: #fafbfc;

  /* Gray scale (50/100/200/300 は DS v1.2 の値、400+ は Phase 1 拡張) */
  --jj-gray-50: #F5F7FA;   /* DS v1.2 (light gray / placeholder bg) */
  --jj-gray-100: #EEF1F6;  /* DS v1.2 */
  --jj-gray-200: #E5E9F0;  /* DS v1.2 (border) */
  --jj-gray-300: #CBD2DD;  /* DS v1.2 */
  --jj-gray-400: #9ca3af;
  --jj-gray-500: #6b7280;
  --jj-gray-600: #4b5563;
  --jj-gray-700: #374151;
  --jj-gray-800: #1f2937;
  --jj-gray-900: #111827;

  /* Text (DS v1.2 値) */
  --jj-text-primary: #1F2937;     /* DS v1.2 (--jj-text 同値) */
  --jj-text-secondary: var(--jj-gray-700);
  --jj-text-muted: #4A5568;       /* DS v1.2 (--jj-text-mute 同値) */
  --jj-text-on-primary: #ffffff;

  /* DS v1.2 補助色 */
  --jj-blue-tint: #E6F0F7;        /* DS v1.2 (CTA hover 周辺の淡い青) */

  /* Border */
  --jj-border-light: var(--jj-gray-200);
  --jj-border-medium: var(--jj-gray-300);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  --jj-font-family-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, -apple-system, sans-serif;
  --jj-font-family-en: "Inter", system-ui, -apple-system, sans-serif;
  --jj-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Phase 1 はシステムフォント基盤で動かすため、
     base.css の body は --jj-font-family-jp を参照しつつ
     system-ui へのフォールバックを優先するチェーンになる。 */

  /* Font sizes */
  --jj-text-xs: 12px;
  --jj-text-sm: 13px;
  --jj-text-base: 14px;
  --jj-text-md: 16px;
  --jj-text-lg: 18px;
  --jj-text-xl: 20px;
  --jj-text-2xl: 24px;
  --jj-text-3xl: 30px;
  --jj-text-4xl: 36px;
  --jj-text-5xl: 48px;
  --jj-text-hero: 56px;

  /* Font weights */
  --jj-font-normal: 400;
  --jj-font-medium: 500;
  --jj-font-semibold: 600;
  --jj-font-bold: 700;
  --jj-font-black: 900;        /* DS v1.2 H1 用 (28px 以上で使用、CLAUDE.md 規定) */

  /* Line heights */
  --jj-leading-tight: 1.25;
  --jj-leading-normal: 1.5;
  --jj-leading-relaxed: 1.75;
  --jj-leading-loose: 2;

  /* ============================================================
     SPACING
     ============================================================ */

  --jj-space-1: 4px;
  --jj-space-2: 8px;
  --jj-space-3: 12px;
  --jj-space-4: 16px;
  --jj-space-5: 20px;
  --jj-space-6: 24px;
  --jj-space-8: 32px;
  --jj-space-10: 40px;
  --jj-space-12: 48px;
  --jj-space-16: 64px;
  --jj-space-20: 80px;
  --jj-space-24: 96px;
  --jj-space-32: 128px;

  /* ============================================================
     RADIUS (DS v1.2 値)
     ============================================================ */

  --jj-radius-sm: 8px;          /* DS v1.2 --jj-r-sm */
  --jj-radius-md: 12px;         /* DS v1.2 --jj-r-md */
  --jj-radius-lg: 16px;         /* DS v1.2 --jj-r-lg */
  --jj-radius-xl: 24px;         /* DS v1.2 --jj-r-xl */
  --jj-radius-full: 9999px;

  /* ============================================================
     SHADOW (DS v1.2 値 + v1.2.5 で xs を新規追加)
     ============================================================ */

  /* v1.2.5: header / 整理感のための極薄シャドウ。視認できるかできないかのライン。
     強くしすぎると 「フラット感」 を損なうため、α=0.03 で固定する。 */
  --jj-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);

  --jj-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);                /* DS v1.2 */
  --jj-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);               /* DS v1.2 (= --jj-shadow) */
  --jj-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);               /* DS v1.2 */

  /* ============================================================
     FOCUS RING (v1.2.5 新規)
     ============================================================
     - --jj-focus-outline: 一般的な要素 (リンク・カード・ボタン) 用の outline。
       Phase 1-7 で使われてきた 「2px solid var(--jj-blue)」 を集約。
     - --jj-focus-ring: フォーム入力など、内側枠を持つ要素用の box-shadow リング。
       Phase 1-7 で使われてきた 「0 0 0 3px rgba(0,114,177,.15)」 を集約。
     - --jj-focus-outline-offset: outline-offset 共通値。
     値は既存実装と同一に保ち、参照だけ統一する (見た目変化なし)。
     ============================================================ */

  --jj-focus-outline:        2px solid var(--jj-primary);
  --jj-focus-outline-offset: 2px;
  --jj-focus-ring:           0 0 0 3px rgba(0, 114, 177, 0.15);

  /* ============================================================
     LAYOUT
     ============================================================ */

  --jj-container-max: 1200px;
  --jj-container-narrow: 880px;
  --jj-container-wide: 1440px;
  --jj-container-padding-x: 16px;

  /* ============================================================
     Z-INDEX
     ============================================================ */

  --jj-z-base: 1;
  --jj-z-dropdown: 10;
  --jj-z-sticky: 20;
  --jj-z-modal: 30;
  --jj-z-toast: 40;
  --jj-z-skiplink: 9999;

  /* ============================================================
     TRANSITION
     ============================================================
     v1.2.5: 全 transition は --jj-ease (cubic-bezier(0.4, 0, 0.2, 1)) を参照。
     v1.2 で定義済みだった --jj-ease を実際に使う形に整理した
     (ease-out との数式的差は終端の減衰のみ、見た目に大差なし)。
     ============================================================ */

  /* DS v1.2 が使う easing (本体定義は下記、transition 群の参照元) */
  --jj-ease: cubic-bezier(0.4, 0, 0.2, 1);

  --jj-transition-fast: 150ms var(--jj-ease);
  --jj-transition-normal: 250ms var(--jj-ease);
  --jj-transition-slow: 400ms var(--jj-ease);

  /* ============================================================
     DS v1.2 ALIAS LAYER
     ============================================================
     Mock CSS (top-page-v12.css) は以下の命名で変数を参照する。
     既存の v1.4 §2.1 命名と二重管理にせず、単一の真実 (上の定義) に
     エイリアスとして接続することで、Mock 由来の CSS をそのまま移植可能にする。
     将来 DS v2.0 に上げる時もこのエイリアス層を更新するだけで済む。
     ============================================================ */

  --jj-blue:        var(--jj-primary);
  --jj-blue-dark:   var(--jj-primary-dark);
  --jj-orange:      var(--jj-accent);
  --jj-orange-dark: var(--jj-accent-dark);
  --jj-white:       var(--jj-bg-white);

  --jj-text:        var(--jj-text-primary);
  --jj-text-mute:   var(--jj-text-muted);

  --jj-font-jp:     var(--jj-font-family-jp);
  --jj-font-en:     var(--jj-font-family-en);

  --jj-r-sm:        var(--jj-radius-sm);
  --jj-r-md:        var(--jj-radius-md);
  --jj-r-lg:        var(--jj-radius-lg);
  --jj-r-xl:        var(--jj-radius-xl);

  --jj-shadow:      var(--jj-shadow-md);
}