/**
 * デザイントークン - CSS変数定義
 */

:root {
  /* ===== カラーパレット ===== */

  /* プライマリカラー（茶色） */
  --color-primary: #42210B;
  --color-primary-rgb: 66, 33, 11;

  /* アクセントカラー（赤） */
  --color-accent: #C1272D;
  --color-accent-rgb: 193, 39, 45;

  /* ベースカラー */
  --color-white: #FFFFFF;
  --color-white-rgb: 255, 255, 255;
  --color-black: #000000;

  /* 背景色 */
  --color-bg: var(--color-white);
  --color-bg-overlay: rgba(var(--color-white-rgb), 0.75);

  /* テキストカラー */
  --color-text: var(--color-primary);
  --color-text-light: var(--color-white);
  --color-text-accent: var(--color-accent);

  /* ===== タイポグラフィ ===== */

  /* フォントファミリー */
  --font-family-base: 'Noto Sans JP', 'Noto Sans', -apple-system, BlinkMacSystemFont,
                      'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* フォントウェイト */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* フォントサイズ */
  --font-size-xs: 14px;
  --font-size-sm: 16px;
  --font-size-base: 24px;    /* SP: 24px */
  --font-size-md: 32px;      /* PC: 32px */
  --font-size-lg: 40px;      /* SP: 40px */
  --font-size-xl: 48px;      /* PC: 48px */
  --font-size-2xl: 64px;     /* SP: 64px */
  --font-size-3xl: 96px;     /* PC: 96px */

  /* 行の高さ */
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.8;

  /* ===== スペーシング ===== */

  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;

  /* ===== レイアウト ===== */

  /* ブレイクポイント */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 768px;

  /* コンテンツ幅 */
  --max-width-content: 1216px;
  --max-width-full: 1440px;

  /* パディング */
  --padding-container-sp: 24px;
  --padding-container-pc: 112px;

  /* ===== その他 ===== */

  /* ボーダー */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;

  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 8px;
  --border-width-extra-thick: 12px;

  /* シャドウ */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* トランジション */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  /* z-index */
  --z-index-base: 1;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-modal-backdrop: 400;
  --z-index-modal: 500;
  --z-index-popover: 600;
  --z-index-tooltip: 700;
}