/**
 * variables.css
 * デザイントークン（色・フォント・余白）の定義
 * ここの値を変えるだけでサイト全体のデザインが変わる
 */

:root {

  /* ===========================
     カラーパレット
     Claude Designから抽出した値
  =========================== */

  /* ベースカラー（背景・テキスト） */
  --color-bg:          #ffffff;
  --color-bg-gray:     #f4f5f6;
  --color-bg-dark:     #16191d;
  --color-bg-dark-2:   #22272d;

  /* テキスト */
  --color-text-primary:   #16191d;
  --color-text-secondary: #5b626b;
  --color-text-muted:     #aeb4bc;
  --color-text-white:     #ffffff;

  /* アクセントカラー（オレンジレッド） */
  --color-accent:       #e8481c;
  --color-accent-dark:  #c43a12;
  --color-accent-light: rgba(232, 72, 28, 0.1);

  /* ボーダー */
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-light: #e8eaed;


  /* ===========================
     タイポグラフィ
  =========================== */

  --font-ja:   'Noto Sans JP', 'ヒラギノ角ゴ Pro', 'Yu Gothic', sans-serif;
  --font-en:   'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* フォントサイズ（モバイルファースト） */
  --fs-xs:   0.75rem;   /*  12px */
  --fs-sm:   0.875rem;  /*  14px */
  --fs-base: 1rem;      /*  16px */
  --fs-md:   1.125rem;  /*  18px */
  --fs-lg:   1.25rem;   /*  20px */
  --fs-xl:   1.5rem;    /*  24px */
  --fs-2xl:  2rem;      /*  32px */
  --fs-3xl:  2.5rem;    /*  40px */
  --fs-4xl:  3rem;      /*  48px */

  /* 行間 */
  --lh-tight:  1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* 字間 */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.15em;


  /* ===========================
     スペーシング
  =========================== */

  --space-xs:   0.5rem;   /*  8px */
  --space-sm:   1rem;     /* 16px */
  --space-md:   1.5rem;   /* 24px */
  --space-lg:   2rem;     /* 32px */
  --space-xl:   3rem;     /* 48px */
  --space-2xl:  5rem;     /* 80px */
  --space-3xl:  7.5rem;   /* 120px */

  /* セクションの上下余白 */
  --section-py: 5rem;


  /* ===========================
     レイアウト
  =========================== */

  --max-width:       1200px;
  --max-width-text:  720px;
  --container-px:    1.5rem;   /* コンテナの左右余白 */

  /* 角丸 */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* 影 */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.16);


  /* ===========================
     トランジション
  =========================== */

  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.6s ease;
}


/* ===========================
   タブレット以上（768px〜）
=========================== */
@media (min-width: 768px) {
  :root {
    --container-px: 2rem;
    --section-py:   6rem;
  }
}

/* ===========================
   PC（1024px〜）
=========================== */
@media (min-width: 1024px) {
  :root {
    --container-px: 3rem;
    --section-py:   8rem;
    --fs-3xl:  3rem;     /* 48px */
    --fs-4xl:  4rem;     /* 64px */
  }
}