/* ============================================================
   P.C.P. Design System — Tokens (原型 v0.1 / 2026-07-08)
   ------------------------------------------------------------
   単一の真実の源。色・タイポ・余白・線・影・動きをここで定義し、
   ホームページ本体と参照ページ（styleguide.html）が共通して読む。
   路線: 白基調エディトリアル（現行v1・noatune踏襲）
   ブランド注入: ロゴ実測パレット（greige / gold / black）
   ============================================================ */

:root {
  /* --- Brand palette（ロゴ実測） --------------------------- */
  --pcp-greige: #C8C0B8;   /* ロゴ字形のトープ。温かい無彩寄りニュートラル */
  --pcp-gold:   #C8A010;   /* ロゴのマスタードゴールド。唯一の有彩アクセント */
  --pcp-black:  #000000;   /* ロゴの黒三角 */

  /* gold の派生（tint / hover 用） */
  --pcp-gold-ink:  #A5850D; /* テキスト上でのゴールド（白地で可読なやや暗め） */
  --pcp-gold-wash: #F7F1DE; /* ごく淡いゴールド地（ハイライト面） */
  --greige-wash:   #F1EFEA; /* greige のごく淡い面（section-alt 温度付け） */

  /* --- System state（機能的アラート専用・ブランドアクセントとは別系統） ---
     期限切れ等の「状態の警告」に限る。彩度を抑えたレンガ赤でエディトリアル基調に馴染ませる。
     憲法2条のゴールド（ブランドアクセント）とは役割が異なるため色を分ける。面で塗らない。 */
  --warn:      #B23A2E;   /* 期限切れ等の警告テキスト。白地で可読・締まったレンガ赤 */

  /* --- Surface / Ink ------------------------------------- */
  --paper:     #FFFFFF;   /* 基本背景 */
  --paper-alt: #F5F3F0;   /* 交互セクション背景（greige寄りに微温） */
  --ink:       #141414;   /* 主テキスト（くっきり・やや深め） */
  --ink-muted: #454545;   /* 本文・副テキスト（旧#6B6B6Bはコントラスト不足＝淡さの主因。締めた） */
  --ink-faint: #807A71;   /* ラベル・キャプション（greige寄り／副テキストとは階層を保つ） */
  --line:      #E4E2DE;   /* 罫線・境界（greige寄り） */
  --near-black:#111111;   /* コントラスト面（Contact / Footer） */
  --placeholder-a: #DEDCD7;
  --placeholder-b: #D2CFC9;

  /* --- Typography ---------------------------------------- */
  /* 本体は sans（踏襲）。セリフはロゴ／ワードマーク専用言語として保持 */
  --font-sans:    "Inter", "Noto Sans JP", system-ui, sans-serif;
  --font-display: "Cormorant Garamond", "Noto Serif JP", Georgia, serif; /* ロゴ字形（オールドスタイル系）に呼応。ワードマーク・限定使用。Playfairは硬すぎで差替（2026-07-08） */

  /* type scale（1.25 base・clampで流体化） */
  --fs-hero:    clamp(4rem, 14vw, 11rem);
  --fs-h1:      clamp(2rem, 5vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 4vw, 2.6rem);
  --fs-h3:      1.4rem;
  --fs-lead:    clamp(1rem, 2.4vw, 1.35rem);
  --fs-body:    1rem;
  --fs-small:   0.95rem;
  --fs-label:   0.72rem;   /* uppercase ラベル */

  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-body:    1.75;

  --ls-label:   0.35em;    /* ラベルの字間 */
  --ls-tag:     0.14em;    /* role/genre 等の小見出し */
  --ls-wide:    0.18em;    /* tagline */

  --fw-light:   300;
  --fw-reg:     400;
  --fw-med:     500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* --- Spacing scale（8px系・rem） ----------------------- */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.2rem;
  --sp-4: 1.6rem;
  --sp-5: 2.4rem;
  --sp-6: 3.2rem;
  --sp-7: 4.5rem;
  --sp-8: 7rem;    /* セクション縦パディング（現行踏襲） */

  --container: 1200px;
  --gutter: 2rem;

  /* --- Radius ------------------------------------------- */
  --r-none: 0;
  --r-sm:   4px;
  --r-md:   8px;
  --r-pill: 2rem;

  /* --- Border ------------------------------------------- */
  --bd:      1px solid var(--line);
  --bd-ink:  1px solid var(--ink);

  /* --- Shadow（控えめ・エディトリアル） ----------------- */
  --sh-card:  0 18px 40px rgba(0,0,0,0.06);
  --sh-soft:  0 8px 24px rgba(0,0,0,0.05);

  /* --- Motion ------------------------------------------- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.2s;
  --dur-mid:  0.25s;
  --dur-slow: 0.4s;

  /* --- Layer -------------------------------------------- */
  --z-header: 100;
  --z-overlay: 90;
}