/* ==========================================================================
   Design Tokens — cal パーソナルブランド共通トークン (凍結版 v1)
   このファイルは :root にCSSカスタムプロパティを定義するのみ。
   個別コンポーネントのスタイルはここに書かない。
   ========================================================================== */

:root {
  /* ---- Color: Base ---- */
  --color-ink: #0F172A;        /* 本文・見出しの基本テキスト色 */
  --color-bg: #FAFAF7;         /* ページ背景（オフホワイト） */

  /* ---- Color: Accent ---- */
  --color-accent: #0EA5A6;     /* ティール：主要CTA・リンク・強調要素 */
  --color-highlight: #F59E0B;  /* アンバー：警告・注目・差し色（多用しない） */

  /* ---- Color: Gray Scale ---- */
  --color-gray-700: #334155;   /* 副次テキスト・キャプション */
  --color-gray-500: #64748B;   /* プレースホルダ・非活性テキスト */
  --color-gray-300: #CBD5E1;   /* ボーダー・区切り線（濃） */
  --color-gray-200: #E2E8F0;   /* ボーダー・区切り線（淡）・背景 */

  /* ---- Color: Surface / Semantic (実装補助。基本トークンの組み合わせ) ---- */
  --color-surface: #FFFFFF;         /* カード等の前面サーフェス */
  --color-border: var(--color-gray-200);
  --color-text-primary: var(--color-ink);
  --color-text-secondary: var(--color-gray-700);
  --color-text-muted: var(--color-gray-500);
  --color-on-accent: #FFFFFF;  /* アクセント/濃色背景の上に乗せる文字色 */

  /* ---- Typography ---- */
  --font-body: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
  --font-heading: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --fw-body: 400;
  --fw-heading: 700;

  /* Type scale（4px基準スケールに整合） */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: 40px;

  --lh-tight: 1.3;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* ---- Spacing（4px基準スケール） ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radius ---- */
  --radius-sm: 8px;   /* 小要素：ボタン・入力欄・バッジ */
  --radius-lg: 12px;  /* 大要素：カード・モーダル・セクション */
  --radius-full: 999px;

  /* ---- Shadow（控えめ） ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10);

  /* ---- Layout ---- */
  --container-max: 1120px;
  --sidebar-width: 240px;
  --header-height: 64px;

  /* ---- Motion ---- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}