/*
 * tokens.css — INFO-Logi Design Tokens (Layer 1)
 * 目的：INFO-Logi 全ページで参照される単一の真実 (Single Source of Truth)。
 * 既存 Bootstrap 5 ベースに被せる前提で、すべて CSS Custom Properties で定義。
 * Tailwind v4 (@theme) / Next.js 移行時もそのままインポート可能。
 *
 * 想定読者：プロダクトデザイナー兼デザインエンジニア、運送業の意思決定者
 * 関連KPI：FV CTAクリック率 / コンポーネント実装齟齬数 / Lighthouse a11y スコア
 * 命名規則：--<category>-<role>-<scale>  例: --color-brand-600 / --space-6
 */

:root {
  /* ============================================================
   * COLOR — Brand (運送ブルー)
   * 中明色 500 がロゴの青。AAコントラストを取りやすい 600/700 を主力に。
   * ============================================================ */
  --color-brand-50:  #f0f6fc;
  --color-brand-100: #d9e9f7;
  --color-brand-200: #b3d3ee;
  --color-brand-300: #80b4e0;
  --color-brand-400: #4a93cf;
  --color-brand-500: #1d6cc1;  /* logo */
  --color-brand-600: #155da6;  /* primary action */
  --color-brand-700: #114a83;  /* link / hover */
  --color-brand-800: #0e3d6d;
  --color-brand-900: #0c3258;

  /* COLOR — Neutral (やや温色寄りのグレースケール) */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #fafbfc;
  --color-neutral-100: #f3f5f8;
  --color-neutral-200: #e6e9ef;
  --color-neutral-300: #d2d7e0;
  --color-neutral-400: #9aa3b0;
  --color-neutral-500: #6b7383;
  --color-neutral-600: #4f5664;
  --color-neutral-700: #353c4a;
  --color-neutral-800: #1f2532;
  --color-neutral-900: #0e131c;

  /* COLOR — Accent (clay / 業務の手触り。イラスト・強調にのみ使用) */
  --color-accent-50:  #fdf6ed;
  --color-accent-100: #f9e6cb;
  --color-accent-300: #e9b87e;
  --color-accent-500: #c87b34;
  --color-accent-600: #b6602a;
  --color-accent-700: #964d22;

  /* COLOR — Semantic (色＋アイコン＋テキストの三重符号化前提) */
  --color-success: #0a8a5f;
  --color-warning: #d68a23;
  --color-error:   #c8402a;
  --color-info:    var(--color-brand-500);

  /* COLOR — Surface roles (light) */
  --color-bg-base:     var(--color-neutral-0);
  --color-bg-elevated: var(--color-neutral-0);
  --color-bg-sunken:   var(--color-neutral-50);
  --color-bg-inverse:  var(--color-neutral-900);

  --color-fg-primary:   var(--color-neutral-800);
  --color-fg-secondary: var(--color-neutral-600);
  --color-fg-muted:     var(--color-neutral-500);
  --color-fg-inverse:   var(--color-neutral-0);
  --color-fg-brand:     var(--color-brand-600);
  --color-fg-link:      var(--color-brand-700);

  --color-border-subtle:  var(--color-neutral-200);
  --color-border-default: var(--color-neutral-300);
  --color-border-strong:  var(--color-neutral-400);
  --color-border-brand:   var(--color-brand-500);
  --color-border-focus:   var(--color-brand-500);

  /* ============================================================
   * TYPOGRAPHY
   * ============================================================ */
  --font-sans-jp: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  --font-sans-en: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* sizes */
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  17px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 32px;
  --fs-5xl: 40px;
  --fs-6xl: 48px;

  /* line-height (日本語は 1.7〜1.9 を中心に) */
  --lh-tight:   1.25;
  --lh-snug:    1.4;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;
  --lh-loose:   1.9;

  /* tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  /* weight */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* ============================================================
   * SPACING (4px base, 8 ティック)
   * ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* セクションのリズム制御（密度高セクション ↔ 余白セクションの交互配置） */
  --section-y-dense:    var(--space-16);  /* 64px */
  --section-y-default:  var(--space-24);  /* 96px */
  --section-y-spacious: var(--space-32);  /* 128px */

  /* ============================================================
   * RADIUS / SHADOW
   * ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  --shadow-sm:   0 1px 2px rgba(14, 19, 28, 0.04), 0 1px 3px rgba(14, 19, 28, 0.06);
  --shadow-md:   0 4px 12px rgba(14, 19, 28, 0.08), 0 2px 4px rgba(14, 19, 28, 0.04);
  --shadow-lg:   0 12px 32px rgba(14, 19, 28, 0.12), 0 4px 8px rgba(14, 19, 28, 0.06);
  --shadow-hero: 0 24px 64px rgba(14, 19, 28, 0.10), 0 8px 16px rgba(14, 19, 28, 0.06);
  --shadow-ring-focus: 0 0 0 3px rgba(29, 108, 193, 0.25);

  /* ============================================================
   * MOTION
   * ============================================================ */
  --duration-instant:    80ms;
  --duration-fast:       120ms;
  --duration-base:       200ms;
  --duration-slow:       320ms;
  --duration-deliberate: 480ms;

  --easing-standard:   cubic-bezier(0.2, 0, 0, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --easing-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================================
   * Z-INDEX / BREAKPOINT (参考用)
   * Breakpoint は CSS 変数では使用できないが、ドキュメントとして残す
   *   sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536
   * ============================================================ */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-modal:   1000;
  --z-toast:   1100;
  --z-tooltip: 1200;

  /* container max-width */
  --container-max: 1280px;
  --container-prose: 720px;
}

/* ============================================================
 * DARK MODE — 手動切替のみ（OSのダークモードは自動追従しない）
 * 理由：日本のB2B SaaS（SmartHR/freee/MFW等）はライトモード固定が主流。
 *      意思決定者層がOS標準で意図せずダークになるのを避ける。
 *      将来 [data-theme="dark"] のトグルUIを実装する余地は残す。
 * ============================================================ */

/* 手動切替用クラス（scheme トグルを将来実装する場合） */
[data-theme="dark"] {
  --color-bg-base:     var(--color-neutral-900);
  --color-bg-elevated: var(--color-neutral-800);
  --color-bg-sunken:   #0a0e15;
  --color-fg-primary:   var(--color-neutral-100);
  --color-fg-secondary: var(--color-neutral-300);
  --color-fg-muted:     var(--color-neutral-400);
  --color-fg-brand:     var(--color-brand-300);
  --color-border-subtle:  rgba(255, 255, 255, 0.08);
  --color-border-default: rgba(255, 255, 255, 0.14);
}

/* ============================================================
 * REDUCED MOTION
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant:    0ms;
    --duration-fast:       0ms;
    --duration-base:       0ms;
    --duration-slow:       0ms;
    --duration-deliberate: 0ms;
  }
}