/* ============================================================
   Cross Learning Design Tokens — CSS Custom Properties
   SSOT: docs/design-tokens.md
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. カラー: ブランド・プライマリ（青）
  ---------------------------------------------------------- */
  --color-brand-primary-50:  #EFF6FF;
  --color-brand-primary-100: #DBEAFE;
  --color-brand-primary-200: #BFDBFE;
  --color-brand-primary-300: #93C5FD;
  --color-brand-primary-400: #60A5FA;
  --color-brand-primary-500: #3B82F6;
  --color-brand-primary-600: #2563EB;
  --color-brand-primary-700: #1D4ED8;
  --color-brand-primary-800: #1E40AF;
  --color-brand-primary-900: #1E3A8A;

  /* ----------------------------------------------------------
     2. カラー: アクセント（ピンク）
     設計メモ §4：ピンク案残し、サポート訴求セクションに局所適用
  ---------------------------------------------------------- */
  --color-accent-pink-100: #FCE7F3;
  --color-accent-pink-300: #F9A8D4;
  --color-accent-pink-500: #EC4899;
  --color-accent-pink-700: #BE185D;

  /* ----------------------------------------------------------
     3. カラー: テキスト
     ※ 真っ黒禁止（design-brief §9）
  ---------------------------------------------------------- */
  --color-text-primary:   #1F2937; /* slate-800 */
  --color-text-secondary: #4B5563; /* slate-600 */
  --color-text-muted:     #9CA3AF; /* slate-400 */
  --color-text-heading:   #1E3A8A; /* brand-900 */
  --color-text-inverse:   #FFFFFF;

  /* ----------------------------------------------------------
     4. カラー: サーフェス
  ---------------------------------------------------------- */
  --color-surface-base:    #FFFFFF;
  --color-surface-raised:  #F9FAFB; /* slate-50 */
  --color-surface-inverse: #0F172A; /* slate-900 */

  /* ----------------------------------------------------------
     5. カラー: ボーダー
  ---------------------------------------------------------- */
  --color-border-subtle: #E5E7EB; /* slate-200 */
  --color-border-strong: #9CA3AF; /* slate-400 */

  /* ----------------------------------------------------------
     6. カラー: ステータス
  ---------------------------------------------------------- */
  --color-status-success: #16A34A;
  --color-status-warning: #F59E0B;
  --color-status-danger:  #DC2626;
  --color-status-info:    var(--color-brand-primary-500);

  /* ----------------------------------------------------------
     7. タイポグラフィ: フォントファミリ
  ---------------------------------------------------------- */
  --font-family-sans: "IBM Plex Sans JP", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-family-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ----------------------------------------------------------
     8. タイポグラフィ: フォントサイズ（fluid: clamp）
  ---------------------------------------------------------- */
  --font-size-xs:    clamp(0.75rem,  0.75rem + 0.1vw, 0.8125rem);
  --font-size-sm:    clamp(0.875rem, 0.875rem + 0.1vw, 0.9375rem);
  --font-size-base:  clamp(0.9375rem,0.9375rem + 0.2vw, 1.125rem);
  --font-size-lg:    clamp(1.25rem,  1.25rem  + 0.3vw, 1.625rem);
  --font-size-xl:    clamp(1.5rem,   1.5rem   + 0.7vw, 2.25rem);
  --font-size-2xl:   clamp(1.75rem,  1.75rem  + 1.2vw, 3rem);
  --font-size-price: clamp(1.75rem,  1.75rem  + 1.2vw, 3rem);

  /* ----------------------------------------------------------
     9. タイポグラフィ: ウェイト
  ---------------------------------------------------------- */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* ----------------------------------------------------------
     10. タイポグラフィ: 行間・字間
  ---------------------------------------------------------- */
  --line-height-tight:  1.25;
  --line-height-snug:   1.4;
  --line-height-normal: 1.7;
  --line-height-loose:  1.9;

  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.05em; /* EN 見出し */

  /* ----------------------------------------------------------
     11. スペーシング（8px グリッド）
  ---------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ----------------------------------------------------------
     12. レイアウト
  ---------------------------------------------------------- */
  --layout-max-width:    1200px;
  --layout-gutter-sp:    var(--space-4);  /* 16px */
  --layout-gutter-pc:    var(--space-8);  /* 32px */

  /* ----------------------------------------------------------
     13. 角丸
  ---------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     14. シャドウ
  ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* ----------------------------------------------------------
     15. モーション
  ---------------------------------------------------------- */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --duration-hero:   1200ms;

  --easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
}