/* ============================================================
   tokens.css — デザイントークン（SIGNAL / AI プロダクトスタジオ）
   案件流用時に差し替えるのは原則このファイルと config.js だけ。
   他の CSS / JS に生の色コードを書かないこと（JS は getComputedStyle
   でここのトークンを読む）。
   ============================================================ */

:root{
  /* --- 色（ダーク基調が既定） --- */
  --c-bg:        #07080b;
  --c-surface:   #0e1016;
  --c-surface-2: #151822;
  --c-ink:       #f2f4f8;   /* 本文。--c-bg に対し 4.5:1 以上 */
  --c-ink-muted: #9aa3b2;   /* 補助テキスト。4.5:1 以上 */
  --c-line:      rgba(255,255,255,.10);
  --c-accent:    #3be2ff;   /* シアン（SIGNAL のキーカラー） */
  --c-accent-2:  #4d6bff;   /* エレクトリックブルー */
  --c-accent-2-deep: #3145c4; /* CTA ホバー面。--c-ink（#f2f4f8）に対し 5.3:1 */

  /* 動く背景の上のテキスト保護（スクリム）とガラス面 */
  --c-scrim:        rgba(7,8,11,.58);
  --c-scrim-strong: rgba(7,8,11,.88);
  --c-glass:        rgba(14,16,22,.55);
  --c-glass-line:   rgba(255,255,255,.14);
  --c-accent-ink:   #06171c; /* アクセント面上の文字色（CTA 等） */

  /* --- タイポ（clamp によるフルード） --- */
  --ff-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic",
             "BIZ UDPGothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* ブランドロゴ・等幅ラベルは webfont を明示する。
     OS 既定の等幅（SF Mono / Consolas）任せにするとブランドの顔が環境依存になる */
  --ff-brand: "Space Grotesk", "SF Mono", "Menlo", sans-serif;
  --ff-mono: "Roboto Mono", "SF Mono", "Menlo", "Consolas", "Osaka-Mono", monospace;
  --fs-display: clamp(2.75rem, 9vw, 8rem);
  --fs-h1: clamp(2rem, 5.5vw, 4rem);
  --fs-h2: clamp(1.75rem, 4vw, 3.25rem);   /* display 8rem との中間段。本文比 3.0 倍 */
  --fs-h3: clamp(1.125rem, 1.8vw, 1.5rem);
  --fs-body: clamp(0.95rem, 1.05vw, 1.0625rem);
  --fs-small: 0.8125rem;
  /* --lh-tight / --tr-tight は欧文専用。和文見出しに当てると行が接触するため分離 */
  --lh-tight: 1.02;  --lh-heading: 1.2;  --lh-body: 1.8;
  --lh-tight-ja: 1.18;
  --tr-tight: -0.03em; --tr-tight-ja: -0.005em; --tr-wide: 0.16em;

  /* --- 余白（8px グリッド） --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px;
  --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-24:96px; --sp-32:128px;
  --container: 1280px;
  --gutter: clamp(20px, 5vw, 64px);

  /* --- モーション --- */
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-in-out:   cubic-bezier(.65,0,.35,1);
  --dur-fast:.2s; --dur-base:.5s; --dur-slow:.9s; --dur-reveal:1.1s;

  --radius: 2px;  --z-header: 100;
}

/* --- ライトテーマ（トークン再定義のみで成立させる） --- */
:root[data-theme="light"]{
  --c-bg:        #eef1f6;
  --c-surface:   #ffffff;
  --c-surface-2: #e2e7f0;
  --c-ink:       #10141c;
  --c-ink-muted: #4a5568;
  --c-line:      rgba(16,20,28,.14);
  --c-accent:    #007193;   /* 明背景でも小サイズ文字 4.5:1 を満たす濃シアン */
  --c-accent-2:  #2b47d8;
  --c-accent-2-deep: #1f34a8;

  --c-scrim:        rgba(238,241,246,.62);
  --c-scrim-strong: rgba(238,241,246,.92);
  --c-glass:        rgba(255,255,255,.60);
  --c-glass-line:   rgba(16,20,28,.16);
  --c-accent-ink:   #ffffff;
}