/* =====================================================================
   合同会社HD — tokens.css
   デザイントークン（:root 変数のみ）。style.css より先に読み込むこと。
   DESIGN.md §2 と一対一で対応。色・px の直書きは style.css で禁止。
   ===================================================================== */

:root {
  /* ---- Color: base（確定3色 + 周辺トークン）§2.3 ---- */
  --color-bg:            #0A0A0A; /* 【確定】ページ背景 */
  --color-text:          #F5F5F5; /* 【確定】主テキスト・見出し */
  --color-accent:        #00E5C0; /* 【確定】アクセント。CTA/装飾/数値ハイライト限定。本文禁止 */

  --color-surface:       #141414; /* カード/セクション面（第1層） */
  --color-surface-2:     #1C1C1C; /* ネスト面・カードホバー・入力欄背景 */
  --color-surface-3:     #262626; /* モーダル・ツールチップ */

  --color-text-secondary:#A8A8A8; /* 補助テキスト（全面で4.5:1以上） */
  --color-text-muted:    #7A7A7A; /* キャプション・装飾ラベル（#141414以上の面では本文に使わない） */

  --color-line:          #2A2A2A; /* 標準ボーダー・区切り線 */
  --color-line-strong:   #3A3A3A; /* 強調ボーダー・入力欄フォーカス前 */

  /* ---- Color: accent variants ---- */
  --accent-hover:        #1FF0CE;
  --accent-active:       #00C7A6;
  --accent-glow:         rgba(0, 229, 192, 0.45);
  --accent-dim:          rgba(0, 229, 192, 0.12);
  --color-accent-ink:    #04211C; /* アクセント面の上に乗せる濃色テキスト（#00E5C0上で≈8.3:1） */

  /* ---- Color: status / utility ---- */
  --color-success:       #2ED47A;
  --color-warning:       #F5B544;
  --color-danger:        #FF5C5C;
  --focus-ring:          rgba(0, 229, 192, 0.55);
  --overlay:             rgba(10, 10, 10, 0.72);

  /* ---- Gradients（運用ルールは DESIGN.md §2.3）---- */
  --grad-accent:      linear-gradient(135deg, #00E5C0 0%, #00B8E5 100%);
  --grad-accent-soft: linear-gradient(135deg, rgba(0,229,192,0.18) 0%, rgba(0,184,229,0.06) 100%);
  --grad-text:        linear-gradient(90deg, #00E5C0 0%, #6FFFE0 100%);
  --grad-fade-bg:     radial-gradient(60% 50% at 50% 0%, rgba(0,229,192,0.10) 0%, transparent 70%);

  color-scheme: dark; /* ネイティブUI（フォーム/スクロールバー）をダークに統一 */

  /* ---- Typography §2.4 ---- */
  --font-sans: "Space Grotesk", "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-jp:   "Zen Kaku Gothic New", "Space Grotesk", sans-serif;
  --font-num:  "Space Grotesk", sans-serif; /* KPI数値専用 */

  --fs-display: clamp(2.4rem, 1.5rem + 3.6vw, 4rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --fs-h3:      clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --fs-kpi:     clamp(3rem, 2rem + 6vw, 6.5rem);
  --fs-lead:    clamp(1.05rem, 0.95rem + 0.6vw, 1.375rem);
  --fs-body:    clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

  /* ---- Spacing（8pxベース）§2.5 ---- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;    --space-10: 8rem;
  --section-y: clamp(4rem, 2rem + 8vw, 8rem); /* セクション縦パディング */

  /* ---- Radius §2.5 ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ---- Shadow & glow §2.5 ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.6);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 28px rgba(0,0,0,0.5);
  --glow-accent: 0 0 24px rgba(0,229,192,0.35);
  --glow-accent-strong: 0 0 40px rgba(0,229,192,0.5);

  /* ---- Border §2.5 ---- */
  --border-default: 1px solid var(--color-line);
  --border-hover:   1px solid var(--color-line-strong);
  --border-accent:  1px solid var(--color-accent);
  --hairline: 1px solid rgba(255,255,255,0.06);

  /* ---- Motion §2.6 ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  0.18s;
  --dur-base:  0.32s;
  --dur-slow:  0.6s;
  --dur-xslow: 0.9s;

  /* ---- Layout / grid §2.7 ---- */
  --container-max:  1200px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);

  /* ---- Fixed header height（--nav-h は §5.6 と一致させる）---- */
  --nav-h: 64px;
}