/*
  design_system/tokens/tokens.css — 全Web案件共通デザイントークン
  使い方:
  1. 各案件のCSS冒頭でこのファイルを読み込む（<link> or @import）。
  2. 案件固有の色は末尾の「カラー」ブロックの :root をプロジェクト側CSSで
     再宣言して上書きする（--ink / --accent など）。これ以外は上書き禁止。
  3. サイズ系（タイポ/スペーシング/角丸/影/モーション）は変更禁止。
     "ちょうどいい値" が欲しくなったら既存トークンから選ぶこと。
  4. 角丸は6段（xs/sm/md/lg/xl/pill）以外を新規に増やさない。
  5. ダークモードは prefers-color-scheme のみで自動対応（サイズ系は不変）。
*/

:root {
  /* ===== タイポスケール（Major Third 1.25倍・本文16px基準） ===== */
  /* 和文は10px台前半で可読性が崩れるため、下2段は純粋比率より上げて丸めている
     （xs=12px下限。キャプション・注記用。本文には使わない） */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-lg: 1.25rem;    /* 20px */
  --fs-xl: 1.5625rem;  /* 25px */
  --fs-2xl: clamp(1.9531rem, 1.6rem + 1.5vw, 2.4414rem);   /* ~31→39px */
  --fs-3xl: clamp(2.4414rem, 1.9rem + 2.4vw, 3.0518rem);   /* ~39→49px */
  --fs-4xl: clamp(3.0518rem, 2.2rem + 3.8vw, 3.8147rem);   /* ~49→61px */

  /* 行間 */
  --lh-tight: 1.25;
  --lh-normal: 1.6;
  --lh-relaxed: 1.9;

  /* 字間（日本語は本文でもやや広めが可読性向上に寄与） */
  --ls-tight: 0;
  --ls-normal: 0.02em;
  --ls-wide: 0.08em;

  /* ===== スペーシング（4pxグリッド） ===== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  --space-section: clamp(3rem, 2rem + 5vw, 8rem); /* セクション縦余白 */

  /* ===== 角丸（この6段のみ使用） ===== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ===== 影 ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.08);
  /* 色付き影の基準値。任意の色を color-mix() で混ぜて使う。
     実装例:
       .card--accent {
         --shadow-tint: color-mix(in srgb, var(--accent) 35%, transparent);
         box-shadow: 0 12px 24px var(--shadow-tint);
       }
     案件ごとに新しい「色付き影」プロパティを再発明しない。 */
  --shadow-tint: color-mix(in srgb, var(--accent) 35%, transparent);

  /* ===== モーション ===== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* ===== カラー（セマンティック名。案件側の :root で上書きが前提）
     以下はデフォルト＝無彩色ベース＋単一アクセントの中立値。
     案件では :root { --accent: #○○○; ... } のように上書きするだけでよい。 ===== */
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --ink-mute: #8a8a8a;
  --paper: #ffffff;
  --card: #f7f7f7;
  --line: #e0e0e0;
  --accent: #3a3a3a;
  --accent-soft: #d9d9d9;
  --accent-strong: #000000;
  --ok: #2e7d32;
  --warn: #ed6c02;
  --danger: #d32f2f;
}

/* ===== ダークモード（カラートークンのみ上書き。サイズ系は不変） ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f2f2;
    --ink-soft: #c4c4c4;
    --ink-mute: #8f8f8f;
    --paper: #121212;
    --card: #1c1c1c;
    --line: #333333;
    --accent: #d9d9d9;
    --accent-soft: #3a3a3a;
    --accent-strong: #ffffff;
    --ok: #66bb6a;
    --warn: #ffa726;
    --danger: #ef5350;
  }
}