/* ============================================================
   theme.css
   サイト全体の色・フォント・余白の定義ファイル
   ここを変更するとサイト全体のデザインに反映されます
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     Colors / 色
  ---------------------------------------------------------- */

  /* メインカラー */
  --color-primary:      #1B8FCB;   /* ロゴキーカラー・ボタン等 */

  /* テキスト */
  --color-text:         #556269;   /* 本文テキスト */
  --color-text-dark:    #24333C;   /* 見出しテキスト */
  --color-text-sub:     #658698;   /* 補足テキスト・キャプション */
  --color-text-muted:   #92A6B1;   /* 薄いテキスト・プレースホルダー */

  /* 背景・ボーダー */
  --color-bg:           #F2F5F7;   /* サイト背景 */
  --color-bg-light:     #F9FAFB;   /* サイト背景 明るめ */
  --color-bg-white:     #FFFFFF;   /* カード・セクション背景 */
  --color-border:       #E2E2E2;   /* 罫線・区切り線 */
  --color-border-light: #B6C5CD;   /* 薄いボーダー */
  --color-border-ruminous: #a5daf5;   /* ホバー時 */


  /* アクセント */
  --color-accent:       #99E6E0;

  /* エラー・警告 */
  --color-error:        #E40000;


  /* ----------------------------------------------------------
     Typography / フォント
  ---------------------------------------------------------- */

  /* フォントファミリー */
  --font-base:    'Outfit', sans-serif;   /* 本文フォント */
  --font-heading: 'Outfit', sans-serif;   /* 見出しフォント */

  /* フォントサイズ（clampで可変：最小サイズ, 推奨サイズ, 最大サイズ） */
  --text-xxs:  clamp(0.6875rem, 1vw, 0.75rem);      /*  11–12px */
  --text-xs:   clamp(0.75rem,  1.2vw, 0.875rem);   /*  12–14px */
  --text-sm:   clamp(0.875rem, 1.5vw, 1rem);        /*  14–16px */
  --text-md:   clamp(1rem,     1.8vw, 1.1875rem);   /*  16–19px */
  --text-body: clamp(1rem,     1.5vw, 1.0625rem);  /*  16–17px  本文サイズ */
  --text-lg:   clamp(1.125rem, 2vw,   1.375rem);    /*  18–22px */
  --text-lx:   clamp(1.25rem, 2.5vw, 1.625rem);    /* 20px-26px */
  --text-xl:   clamp(1.375rem, 3vw,   2.25rem);     /*  22–36px */
  --text-2xl:  clamp(1.75rem,  4vw,   2.75rem);     /*  28–44px */
  --text-3xl:  clamp(2rem,     5vw,   3.5rem);      /*  32–56px */

  /* 行間 */
  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.9;

  /* 字間 */
  --tracking-normal: 0.04em;
  --tracking-wide:   0.1em;

  /* フォントウェイト */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;


  /* ----------------------------------------------------------
     Spacing / 余白
  ---------------------------------------------------------- */

  --space-xs:   clamp(0.25rem, 0.5vw,  0.5rem);    /*   4–8px */
  --space-sm:   clamp(0.5rem,  1vw,    1rem);       /*   8–16px */
  --space-md:   clamp(1rem,    2.5vw,  1.5rem);     /*  16–24px */
  --space-lg:   clamp(1.5rem,  4vw,    3rem);       /*  24–48px */
  --space-xl:   clamp(2.5rem,  6vw,    5rem);       /*  40–80px */
  --space-2xl:  clamp(4rem,    8vw,    8rem);       /*  64–128px */


  /* ----------------------------------------------------------
     Layout / レイアウト
  ---------------------------------------------------------- */

  --container-max:  1440px;                          /* コンテンツ最大幅 */
  --container-max-md: 1200px;                        /* コンテンツ最大幅（中） */
  --container-max-sm: 1080px;                        /* コンテンツ最大幅（小） */
  --container-pad:  clamp(1rem, 4vw, 2rem);          /* 左右の余白 */


  /* ----------------------------------------------------------
     Border Radius / 角丸
  ---------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;   /* 丸ボタン等 */


  /* ----------------------------------------------------------
     Transition / アニメーション速度
  ---------------------------------------------------------- */

  --transition-fast:   200ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   400ms ease;

}