/* ============================================================
   tokens.css — Primitive token + Semantic token
   ------------------------------------------------------------
   docs/06 §2.0 の参照方向（TD-1〜TD-4）をそのまま実装する。

     Primitive  : 素の値。意味を持たない。上位層を知らない。
     Semantic   : 役割で名前を付ける。Primitive だけを参照する。
     Brand      : Semantic へ「値を割り当てる」入力（brand.css が後から上書き）。
     Component  : Semantic だけを参照する（site.css）。

   読み込み順は tokens.css → brand.css → site.css で固定する。
   この順序が TD-2（Brand は Semantic を上書きする）の実装そのものである。

   本ファイルは共通基盤側であり、案件ごとに変更しない。
   案件で変わるのは「値」だけであり、それは brand.css（= brand.psd1）にある。
   ============================================================ */

:root {

  /* ==========================================================
     1. PRIMITIVE
     固定列。中間値を発明しない（docs/06 §2.1）。
     ========================================================== */

  /* 1.1 無彩色スケール（Brand 未割り当て時のフォールバック） */
  --p-neutral-000: #ffffff;
  --p-neutral-050: #f5f5f4;
  --p-neutral-100: #e9e8e5;
  --p-neutral-200: #d7d5d0;
  --p-neutral-400: #8b9095;
  --p-neutral-600: #565f66;
  --p-neutral-800: #24282b;
  --p-neutral-900: #15181a;

  /* 1.2 間隔スケール */
  --p-space-1: 0.25rem;
  --p-space-2: 0.5rem;
  --p-space-3: 0.75rem;
  --p-space-4: 1rem;
  --p-space-5: 1.5rem;
  --p-space-6: 2rem;
  --p-space-7: 3rem;
  --p-space-8: 4rem;

  /* 1.3 文字サイズスケール（clamp による流体スケール — docs/06 §3.1） */
  --p-size-1: 0.8125rem;                                    /* 13px 固定 */
  --p-size-2: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --p-size-3: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --p-size-4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --p-size-5: clamp(1.1875rem, 1.1rem + 0.4vw, 1.4375rem);
  --p-size-6: clamp(1.625rem, 1.25rem + 1.6vw, 2.375rem);
  --p-size-7: clamp(2rem, 1.28rem + 3.6vw, 4rem);
  --p-size-8: clamp(2.5rem, 1.9rem + 3vw, 3.75rem);

  /* 1.4 行送り */
  --p-leading-tight: 1.3;
  --p-leading-snug: 1.5;
  --p-leading-body: 1.85;

  /* 1.5 角丸（過度な角丸を既定にしない — docs/06 §3.6） */
  --p-radius-0: 0;
  --p-radius-1: 2px;
  --p-radius-2: 4px;

  /* 1.6 罫 */
  --p-border-hairline: 1px;
  --p-border-strong: 2px;

  /* 1.7 影（装飾に使わない。操作可能／浮いていることの表示に限定） */
  --p-shadow-1: 0 6px 24px rgba(0, 0, 0, 0.14);

  /* 1.8 時間・曲線 */
  --p-duration-1: 160ms;
  --p-duration-2: 260ms;
  --p-duration-3: 560ms;
  --p-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 1.9 重なり順 */
  --p-layer-1: 20;
  --p-layer-2: 100;


  /* ==========================================================
     2. SEMANTIC
     役割で名前を付ける。Primitive だけを参照する（TD-1）。
     名前は案件をまたいで変えない。値は Brand が上書きする（TD-2）。
     ========================================================== */

  /* 2.1 面 */
  --color-surface: var(--p-neutral-050);
  --color-surface-raised: var(--p-neutral-000);
  --color-surface-sunken: var(--p-neutral-100);
  --color-inverse-surface: var(--p-neutral-900);

  /* 2.2 文字 */
  --color-text: var(--p-neutral-900);
  --color-text-muted: var(--p-neutral-600);
  --color-inverse-text: var(--p-neutral-050);
  --color-inverse-muted: var(--p-neutral-400);

  /* 2.3 罫（反転面用を必ず別に持つ — docs/06 §2.2） */
  --color-rule: var(--p-neutral-200);
  --color-rule-strong: var(--p-neutral-900);
  --color-inverse-rule: var(--p-neutral-800);

  /* 2.4 対話（アクセントは1色） */
  --color-accent: var(--p-neutral-900);
  --color-accent-text: var(--p-neutral-000);
  --color-accent-on-inverse: var(--p-neutral-050);
  --color-focus: var(--p-neutral-900);
  --color-focus-inverse: var(--p-neutral-050);

  /* 2.5 文字階層（7階層上限 — docs/06 §3.1） */
  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: system-ui, sans-serif;
  --font-numeric: Georgia, "Times New Roman", serif;
  --font-heading-weight: 600;
  --tracking-heading: 0.01em;
  --tracking-body: 0.02em;
  --tracking-label: 0.16em;

  --text-label: var(--p-size-1);
  --text-caption: var(--p-size-2);
  --text-body: var(--p-size-3);
  --text-lead: var(--p-size-4);
  --text-h3: var(--p-size-5);
  --text-h2: var(--p-size-6);
  --text-h1: var(--p-size-7);
  --text-figure: var(--p-size-8);

  --leading-heading: var(--p-leading-tight);
  --leading-lead: var(--p-leading-snug);
  --leading-body: var(--p-leading-body);

  /* 2.6 間隔（セクション間は削らない — docs/06 §3.2） */
  --space-section: clamp(4rem, 2.5rem + 7.5vw, 8.5rem);
  --space-block: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --space-row: var(--p-space-6);
  --space-element: var(--p-space-4);
  --space-inline: var(--p-space-3);
  --space-gutter: clamp(1.25rem, 0.75rem + 2.5vw, 5rem);

  /* 2.7 レイアウト（共通の固定値にしない — docs/06 §3.3） */
  --layout-max: 72rem;
  --layout-measure: 36em;

  /* 2.8 形状 */
  --radius-control: var(--p-radius-1);
  --border-hairline: var(--p-border-hairline);
  --border-strong: var(--p-border-strong);
  --shadow-floating: var(--p-shadow-1);

  /* 2.9 モーション（具体値は Brand が持つ — docs/07 §3.3） */
  --duration-fast: var(--p-duration-1);
  --duration-base: var(--p-duration-2);
  --duration-reveal: var(--p-duration-3);
  --ease-standard: var(--p-ease-standard);
  --reveal-shift: 14px;

  /* 2.10 重なり順 */
  --z-nav: var(--p-layer-1);
  --z-skip: var(--p-layer-2);
}