/* ===========================================
   Design Tokens - 動画でカリトルくん LP
   =========================================== */

:root {
  /* Colors */
  --color-primary: #D82E2E;
  --color-primary-light: rgba(216, 46, 46, 0.2);
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-blue-accent: #435EAD;
  --color-yellow-green: #FAFF70;
  --color-orange-start: #FF9B6C;
  --color-orange-end: #FF5100;
  --color-gray-bg: #F4F4F4;
  --color-gray-border: #E3E3E3;
  --color-pink-light: #FFE0E0;
  --color-gray-text: #666666;
  --color-gray-light: #F0F0F0;

  /* Typography */
  --font-family: 'Noto Sans JP', sans-serif;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Font Sizes */
  --font-size-h1: 31px;
  --font-size-h2: 24px;
  --font-size-h3: 18px;
  --font-size-h4: 16px;
  --font-size-body: 18px;
  --font-size-label: 14px;
  --font-size-small: 12px;

  /* Line Heights */
  --line-height-h1: 1.448;
  --line-height-h2: 1.448;
  --line-height-h3: 1.448;
  --line-height-h4: 1.448;
  --line-height-body: 1.448;
  --line-height-label: 1.448;
  --line-height-small: 1.417;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 30px;

  /* Shadows */
  --shadow-card: 0 0 12px rgba(0, 0, 0, 0.16);
  --shadow-cta: 0 4px 10px rgba(0, 0, 0, 0.25);

  /* Layout */
  --content-width: 100%;
  --content-padding: 16px;
}