/* ============================================================
   CHIBA SOUND STUDIO — Design Tokens v1.0
   「計測器の美学」 Instrument-grade design system
   ------------------------------------------------------------
   命名は用途ベース。色を差し替える場合もこのファイルだけを編集する。
   ============================================================ */

:root {
  /* ---- Color / Ink (コントロールルームの闇: 青みの黒) ---- */
  --ink-950: #0A0C12;   /* ページ背景 */
  --ink-900: #0F1219;   /* セクション交互背景 */
  --ink-850: #121623;   /* カード面 */
  --ink-800: #161B28;   /* パネル */
  --ink-700: #1E2534;   /* ホバー面 / 強い枠 */

  /* ---- Color / Fog (ダーク上のテキスト) ---- */
  --fog-0: #F4F6F9;     /* 見出し・本文強 */
  --fog-1: #B8C0CE;     /* 本文 */
  --fog-2: #828CA0;     /* 補足・キャプション */
  --fog-3: #575F70;     /* 最弱 (罫線上ラベル等) */

  /* ---- Color / Signal (VUメーターの琥珀 = 主アクション & サブベース帯) ---- */
  --signal: #FFB454;
  --signal-strong: #FFC97E;
  --signal-deep: #D98A1E;
  --signal-dim: rgba(255, 180, 84, .14);
  --on-signal: #17110A;  /* signal上の文字色 */

  /* ---- Color / Phase (位相の青 = リンク・第二強調・高域側) ---- */
  --phase: #7C9BFF;
  --phase-strong: #A3B9FF;
  --phase-dim: rgba(124, 155, 255, .13);

  /* ---- Color / Paper (計測レポート面: 料金・QC・仕様書セクション) ---- */
  --paper: #EDEFF3;
  --paper-2: #E2E5EB;
  --paper-ink: #14181F;
  --paper-mut: #4A5261;
  --paper-line: rgba(20, 24, 31, .16);

  /* ---- Color / Utility ---- */
  --ok: #43CE96;                       /* QC合格チェックのみに使用 */
  --warn: #FF8A7A;                     /* エラー表示のみに使用 */
  --line: rgba(178, 195, 224, .13);    /* 標準ヘアライン */
  --line-strong: rgba(178, 195, 224, .26);

  /* ---- Typography ----
     Archivo        : 英字ディスプレイ (見出しの英語・数字の顔)
     IBM Plex Sans JP: 日本語 見出し/本文
     IBM Plex Mono  : Hz・価格・仕様などのデータ声
     ※ 本番では woff2 をセルフホスト推奨 (docs/05_実装ガイド 参照) */
  --font-display: "Archivo", "IBM Plex Sans JP", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-jp: "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Consolas", "Menlo", monospace;

  /* ---- Type scale (fluid) ---- */
  --fs-hero: clamp(2.35rem, 1.4rem + 4.2vw, 4.4rem);
  --fs-h2:   clamp(1.7rem, 1.2rem + 2.1vw, 2.7rem);
  --fs-h3:   clamp(1.2rem, 1.05rem + .7vw, 1.55rem);
  --fs-lead: clamp(1.02rem, .95rem + .35vw, 1.2rem);
  --fs-body: .98rem;
  --fs-small: .85rem;
  --fs-micro: .74rem;

  /* ---- Layout ---- */
  --max: 1200px;
  --max-narrow: 880px;
  --pad-x: clamp(20px, 4vw, 44px);
  --sec-y: clamp(76px, 10vw, 136px);
  --gap: clamp(18px, 2.4vw, 30px);

  /* ---- Shape & Depth ---- */
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --shadow-1: 0 10px 30px rgba(3, 5, 10, .45);
  --shadow-2: 0 24px 70px rgba(3, 5, 10, .55);
  --shadow-signal: 0 8px 34px rgba(255, 180, 84, .28);
  --shadow-contact: 0 2px 0 rgba(255, 255, 255, .035) inset, 0 18px 38px rgba(1, 3, 8, .42);
  --shadow-cast: 0 34px 80px rgba(1, 3, 8, .56), 0 10px 24px rgba(1, 3, 8, .36);
  --shadow-floor: 0 58px 90px rgba(0, 0, 0, .5);
  --scene-perspective: 1200px;
  --depth-bg: -80px;
  --depth-panel: 0px;
  --depth-object: 34px;
  --depth-front: 70px;
  --light-key: rgba(255, 180, 84, .38);
  --light-rim: rgba(124, 155, 255, .28);
  --bevel-hi: rgba(255, 255, 255, .13);
  --bevel-lo: rgba(0, 0, 0, .42);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --dur-1: 240ms;
  --dur-2: 560ms;
  --dur-3: 900ms;
}

/* Paper セクション内はトークンを差し替えて運用する */
.on-paper {
  --fog-0: var(--paper-ink);
  --fog-1: #2C3340;
  --fog-2: var(--paper-mut);
  --line: var(--paper-line);
  --line-strong: rgba(20, 24, 31, .3);
}