@charset "utf-8";

/**
 * デザイントークン: スペーシングシステム
 * 一貫したマージン、パディング、ギャップの規則
 */

:root {
  /* === Base Spacing Unit === */
  --space_base: 1rem;                /* 16px - ベース単位 */
  
  /* === Spacing Scale === */
  --space_xs: 0.25rem;               /* 4px */
  --space_sm: 0.5rem;                /* 8px */
  --space_md: 0.75rem;               /* 12px */
  --space_lg: 1rem;                  /* 16px - ベース */
  --space_xl: 1.25rem;               /* 20px */
  --space_2xl: 1.5rem;               /* 24px */
  --space_3xl: 2rem;                 /* 32px */
  --space_4xl: 2.5rem;               /* 40px */
  --space_5xl: 3rem;                 /* 48px */
  --space_6xl: 4rem;                 /* 64px */
  --space_7xl: 5rem;                 /* 80px */
  --space_8xl: 6rem;                 /* 96px */
  --space_9xl: 7rem;                 /* 112px */
  --space_10xl: 8rem;                /* 128px */
  
  /* === Component Spacing === */
  --space_section: 7.5rem;           /* 120px - セクション間 */
  --space_section_sm: 6rem;          /* 96px - 小セクション間 */
  --space_container: 2rem;           /* 32px - コンテナ内パディング */
  --space_card: 2rem;                /* 32px - カード内パディング */
  --space_card_sm: 1.5rem;           /* 24px - 小カード内パディング */
  
  /* === Layout Spacing === */
  --space_grid_gap: 2rem;            /* 32px - グリッドギャップ */
  --space_grid_gap_sm: 1.5rem;       /* 24px - 小グリッドギャップ */
  --space_grid_gap_lg: 3rem;         /* 48px - 大グリッドギャップ */
  
  /* === Element Spacing === */
  --space_button_padding_x: 2rem;    /* 32px - ボタン横パディング */
  --space_button_padding_y: 1rem;    /* 16px - ボタン縦パディング */
  --space_button_gap: 1.5rem;        /* 24px - ボタン間ギャップ */
  
  --space_input_padding_x: 1rem;     /* 16px - 入力欄横パディング */
  --space_input_padding_y: 0.75rem;  /* 12px - 入力欄縦パディング */
  
  /* === Typography Spacing === */
  --space_title_margin: 2rem;        /* 32px - タイトル下マージン */
  --space_subtitle_margin: 1.5rem;   /* 24px - サブタイトル下マージン */
  --space_paragraph_margin: 1rem;    /* 16px - パラグラフ下マージン */
  --space_list_margin: 0.5rem;       /* 8px - リスト項目マージン */
  
  /* === Border Radius === */
  --radius_xs: 0.125rem;             /* 2px */
  --radius_sm: 0.25rem;              /* 4px */
  --radius_md: 0.375rem;             /* 6px */
  --radius_lg: 0.5rem;               /* 8px */
  --radius_xl: 0.75rem;              /* 12px */
  --radius_2xl: 1rem;                /* 16px */
  --radius_3xl: 1.25rem;             /* 20px */
  --radius_full: 9999px;             /* 完全な円形 */
  
  /* === Shadow Spacing === */
  --shadow_sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow_md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow_lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow_xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow_2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow_card: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow_card_hover: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* === Utility Classes === */

/* マージン */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mt-xs { margin-top: var(--space_xs); }
.mt-sm { margin-top: var(--space_sm); }
.mt-md { margin-top: var(--space_md); }
.mt-lg { margin-top: var(--space_lg); }
.mt-xl { margin-top: var(--space_xl); }
.mt-2xl { margin-top: var(--space_2xl); }
.mt-3xl { margin-top: var(--space_3xl); }
.mt-4xl { margin-top: var(--space_4xl); }
.mt-5xl { margin-top: var(--space_5xl); }
.mt-6xl { margin-top: var(--space_6xl); }

.mb-xs { margin-bottom: var(--space_xs); }
.mb-sm { margin-bottom: var(--space_sm); }
.mb-md { margin-bottom: var(--space_md); }
.mb-lg { margin-bottom: var(--space_lg); }
.mb-xl { margin-bottom: var(--space_xl); }
.mb-2xl { margin-bottom: var(--space_2xl); }
.mb-3xl { margin-bottom: var(--space_3xl); }
.mb-4xl { margin-bottom: var(--space_4xl); }
.mb-5xl { margin-bottom: var(--space_5xl); }
.mb-6xl { margin-bottom: var(--space_6xl); }

/* パディング */
.p-0 { padding: 0; }
.p-xs { padding: var(--space_xs); }
.p-sm { padding: var(--space_sm); }
.p-md { padding: var(--space_md); }
.p-lg { padding: var(--space_lg); }
.p-xl { padding: var(--space_xl); }
.p-2xl { padding: var(--space_2xl); }
.p-3xl { padding: var(--space_3xl); }
.p-4xl { padding: var(--space_4xl); }
.p-5xl { padding: var(--space_5xl); }
.p-6xl { padding: var(--space_6xl); }

/* ギャップ */
.gap-xs { gap: var(--space_xs); }
.gap-sm { gap: var(--space_sm); }
.gap-md { gap: var(--space_md); }
.gap-lg { gap: var(--space_lg); }
.gap-xl { gap: var(--space_xl); }
.gap-2xl { gap: var(--space_2xl); }
.gap-3xl { gap: var(--space_3xl); }
.gap-4xl { gap: var(--space_4xl); }
.gap-5xl { gap: var(--space_5xl); }
.gap-6xl { gap: var(--space_6xl); }

/* ボーダーラディウス */
.rounded-xs { border-radius: var(--radius_xs); }
.rounded-sm { border-radius: var(--radius_sm); }
.rounded-md { border-radius: var(--radius_md); }
.rounded-lg { border-radius: var(--radius_lg); }
.rounded-xl { border-radius: var(--radius_xl); }
.rounded-2xl { border-radius: var(--radius_2xl); }
.rounded-3xl { border-radius: var(--radius_3xl); }
.rounded-full { border-radius: var(--radius_full); }

/* シャドウ */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow_sm); }
.shadow-md { box-shadow: var(--shadow_md); }
.shadow-lg { box-shadow: var(--shadow_lg); }
.shadow-xl { box-shadow: var(--shadow_xl); }
.shadow-2xl { box-shadow: var(--shadow_2xl); }
.shadow-card { box-shadow: var(--shadow_card); }
.shadow-card-hover { box-shadow: var(--shadow_card_hover); }