/* ============================================
   Design Tokens — とどろきLAクリニック LP
   Figma: 54iiVJ9CAMKsDdPRnX6xes
   ============================================ */

:root {
  /* ---- Colors ---- */
  --color-primary:      #0b5885;
  --color-primary-dark: #065b8b;
  --color-teal:         #2a8b89;

  --color-blue-300:     #a1cbd6;
  --color-blue-200:     #c4dde3;
  --color-blue-100:     #e1edf0;
  --color-blue-bg:      #f1f6f8;

  --color-green-300:    #b8dbcd;
  --color-green-200:    #d2eae0;
  --color-green-bg:     #f1f8f5;

  --color-white:        #ffffff;
  --color-text:         #333333;
  --color-text-light:   #666666;

  /* ---- Typography ---- */
  --font-ja: 'FOT-TsukuARdGothic Std', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  --font-en: 'Quicksand', sans-serif;

  /* ---- Font Sizes ---- */
  --fs-base:       16px;
  --fs-sm:         14px;
  --fs-xs:         12px;
  --fs-btn:        16px;
  --fs-heading-s:  22px;
  --fs-heading-m:  34px;
  --fs-heading-l:  20px;
  --fs-heading-ll: 28px;
  --fs-en-lg:      56px;
  --fs-en-xl:      80px;

  /* ---- Spacing ---- */
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  32px;
  --sp-lg:  64px;
  --sp-xl:  96px;

  /* ---- Layout ---- */
  --max-width:      1200px;
  --container-pad:  40px;

  /* ---- Border Radius ---- */
  --radius-btn:   100px;
  --radius-card:  12px;
  --radius-sm:    6px;

  /* ---- Transitions ---- */
  --transition: 0.2s ease;
}