:root {
  /* カラーパレット */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-dark: #1A1A1A;
  --color-orange: #FF9900;
  --color-light-gray: #F7F9FC;
  --color-blue: #5FA3FF;
  --color-red: #DF5656;
  --color-gray: #D9D9D9;
  --color-border-gray: #453535;

  /* テキストカラー */
  --color-text-primary: var(--color-black);
  --color-text-secondary: rgba(0, 0, 0, 0.6);

  /* 背景カラー */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-light-gray);

  /* ボーダーカラー */
  --color-border: var(--color-border-gray);

  /* 幅 */
  --width-container: 1200px;

  /* スペーシング */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2.5rem;      /* 40px */
  --spacing-xxl: 3rem;     /* 48px */
  --spacing-xxxl: 5rem;    /* 80px */

  /* フォントサイズ（Figmaデザインより） */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 1rem;       /* 16px */
  --font-size-md: 1.25rem;    /* 20px */
  --font-size-lg: 1.5rem;     /* 24px */
  --font-size-xl: 2rem;       /* 32px */
  --font-size-xxl: 2.5rem;    /* 40px */
  --font-size-xxxl: 3rem;     /* 48px */

  /* フォントウェイト */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* 行の高さ */
  --line-height-normal: 1.21;
  --line-height-relaxed: 1.5;

  /* ボーダー半径 */
  --border-radius-sm: 0.5rem;    /* 8px */
  --border-radius-md: 1.25rem;   /* 20px */

  /* シャドウ */
  --shadow-sm: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --shadow-footer: 0px -4px 4px 0px rgba(0, 0, 0, 0.25);

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

  /* ブレークポイント */
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
}