/*
 * Socius Design Tokens
 * 全てのデザイン値はここに集約。Hassyが名刺の元データから正確なHEXを抽出し、
 * 後で差し替えるための単一の差し替えポイント。
 */

:root {
  /* ===== Color — 名刺ベースの明るい青系 ===== */
  --color-navy: #1E3A8A;        /* メインカラー(名刺) */
  --color-navy-deep: #16306E;
  --color-blue: #3B82F6;         /* サブ */
  --color-blue-bright: #2563EB;  /* freee 風 ボタン用ハッキリ青 */
  --color-turquoise: #06B6D4;    /* 名刺のターコイズグラデ */
  --color-turquoise-light: #67E8F9; /* 明るいアクセント */
  --color-sky: #E0F2FE;          /* 背景の明るい水色 */

  --color-white: #FFFFFF;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F8FAFC;      /* 少し冷たい白 */
  --color-bg-bright: #EFF6FF;    /* 明るい青背景(セクションリズム用) */

  --color-text: #1F2937;         /* 本文 — やや濃いめにして可読性アップ */
  --color-text-soft: #64748B;    /* 補足テキスト */
  --color-text-strong: #0F172A;  /* 見出し */

  --color-border: #E2E8F0;
  --color-border-soft: #F1F5F9;

  /* ===== Typography — 全面ゴシック ===== */
  /* 英字も和文も同じサンセリフ系で統一。serif は使わない方針(2026/05/25〜) */
  --font-sans-jp: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif;
  --font-sans-en: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* 後方互換:旧変数名も sans に向ける(まだ参照が残っている可能性に備えて) */
  --font-serif-en: var(--font-sans-en);
  --font-serif-jp: var(--font-sans-jp);

  /* Type Scale (clamp で滑らかに) */
  --text-hero: clamp(3rem, 8vw, 6rem);
  --text-h1: clamp(2rem, 4vw, 3rem);
  --text-h2: clamp(1.5rem, 3vw, 2rem);
  --text-h3: 1.25rem;
  --text-lead: clamp(1.0625rem, 1.5vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-xsmall: 0.75rem;

  /* Letter spacing */
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-widest: 0.18em;

  /* ===== Spacing(8pxベース) ===== */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* ===== Layout ===== */
  --max-width: 1200px;
  --max-width-text: 720px;
  --max-width-narrow: 560px;

  --container-padding: clamp(1.25rem, 5vw, 2.5rem);

  /* ===== Effects ===== */
  --transition-base: 200ms ease;
  --transition-slow: 400ms ease;

  --shadow-sm: 0 1px 2px rgba(30, 58, 138, 0.04);
  --shadow-md: 0 4px 16px rgba(30, 58, 138, 0.06);

  /* ===== Borders ===== */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}