/* ====================================================================
   Design Tokens - サイト共通デザイントークン
   design-audit.md セクション3のトークン案に基づく定義。
   全CSSの中で最初に読み込むこと（includes/head.php 参照）。
   ツールページでは includes/tool-theme.php が注入する --tool-primary 系が
   この後に読み込まれ、テーマ上書きが機能する。
   ==================================================================== */
:root {
  /* ---- Color: brand ---- */
  --color-primary:        #1A73E8;  /* 現123回使用の最頻値 */
  --color-primary-dark:   #1557B0;  /* hover。#165db5 / #1664d4 を統合 */
  --color-accent:         #FF9900;  /* #f59e0b / #e68a00 を統合 */

  /* ---- Color: text ---- */
  --color-text:           #333333;  /* #2d3748 #1f2937 #374151 #2c3e50 を統合 */
  --color-text-muted:     #666666;  /* #4a5568 #6b7280 #4b5563 を統合 */
  --color-text-subtle:    #999999;  /* #9ca3af を統合 */

  /* ---- Color: surface / border ---- */
  --color-bg:             #F5F7FA;  /* ページ背景 */
  --color-surface:        #FFFFFF;  /* カード */
  --color-surface-alt:    #F9FAFB;  /* サブ背景。#f8f9fa #fafafa 等を統合 */
  --color-border:         #E5E7EB;  /* #e0e0e0 #dddddd #eeeeee 等を統合 */

  /* ---- Color: dark surface / accent hover ---- */
  --color-accent-dark:   #E68A00;  /* .btn-accent:hover 用 */
  --color-surface-dark:  #2D3748;  /* ダークsurface。#2C3E50 を統合 */
  --color-text-on-dark:  #BDC3C7;

  /* ---- Color: semantic ---- */
  --color-success:        #10B981;
  --color-danger:         #DC2626;  /* #c62828 #d93025 #d32f2f #ef4444 を統合 */
  --color-warning:        #F59E0B;
  --color-warning-bg:     #FEF3C7;  /* #fff3cd #fff8e1 を統合 */
  --color-danger-bg:      #FEE2E2;

  /* ---- Typography ---- */
  --font-sans: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  --text-xs:   0.75rem;    /* バッジ限定。本文使用禁止 */
  --text-sm:   0.875rem;   /* 47回 */
  --text-md:   0.9375rem;  /* 40回 */
  --text-base: 1rem;       /* 33回 */
  --text-lg:   1.125rem;   /* 25回 */
  --text-xl:   1.25rem;    /* card-title */
  --text-2xl:  1.5rem;     /* section見出し */
  --text-3xl:  1.75rem;    /* section-title */
  --text-4xl:  2.25rem;    /* hero/page-title */
  /* 0.85 / 0.9 / 0.95 / 1.2 / 1.375rem および px指定は上記へ丸める */

  /* ---- Spacing (4pxグリッド) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;   /* gap最頻値(48回) */
  --space-4:  16px;   /* padding最頻値(26回) */
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Radius ---- */
  --radius-sm:   6px;    /* 小型ボタン・input-small */
  --radius-md:   8px;    /* 標準（58回・最頻値）: ボタン・入力欄 */
  --radius-lg:   12px;   /* カード */
  --radius-pill: 999px;  /* タグ・pill（現20px/24px/50pxを統合） */
  --radius-full: 50%;

  /* ---- Elevation（38種→4段に集約） ---- */
  --shadow-xs:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.08);   /* カード標準（現11回） */
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.10);  /* hover */
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.12);  /* モーダル系。0 12px 48px等の重い影を廃止 */
  --focus-ring:   0 0 0 3px rgba(26, 115, 232, 0.15);
  /* ツールページでは --focus-ring を rgba(var(--tool-primary-rgb), .15) で上書き */

  /* ---- Motion ---- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  /* transition: all は廃止し、プロパティ指定（background-color, border-color, box-shadow, transform 等）へ */

  /* ---- Layout ---- */
  --container-max: 1080px;
  --breakpoint-sm: 480px;   /* 使用は sm / md の2段に限定 */
  --breakpoint-md: 768px;   /* 640px / 991px / 992px は md へ吸収 */
}