/* ============================================
   Design Tokens
   全てのスタイルはここで定義されたCSS変数のみを使う
   ハードコード禁止
   ============================================ */

:root {
  /* ----- Color: Text ----- */
  --color-text:        #1a1a1a;
  --color-text-sub:    #555555;
  --color-text-mute:   #888888;
  --color-text-invert: #ffffff;

  /* ----- Color: Background ----- */
  --color-bg:          #ffffff;
  --color-bg-soft:     #f7f7f5;
  --color-bg-dark:     #1a2a23;

  /* ----- Color: Accent (深い緑：誠実・信用) ----- */
  --color-accent:       #2a6f4f;
  --color-accent-hover: #1f5a3e;
  --color-accent-soft:  #e8f1ec;

  /* ----- Color: Notice (黄色系：お知らせ・誘導の吹き出し等。2026-05-30 鶴村さん承認で新色追加) ----- */
  --color-notice:        #e3d6a8;
  --color-notice-strong: #b9a86a;
  --color-notice-soft:   #f6f0df;  /* 淡い地（オーダーバンプ本文背景） */

  /* ----- Color: Utility ----- */
  --color-border:      #e5e5e5;
  --color-border-soft: #f0f0f0;
  --color-success:     #2a6f4f;
  --color-warning:     #b8860b;
  --color-error:       #b03030;
  --color-info:        #1f3a5f;

  /* ----- Typography: Family ----- */
  --font-base:    system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic", YuGothic, "Meiryo", sans-serif;  /* システムフォント。Web font不使用（2026-05-31 速度優先で鶴村さん決定）*/
  --font-heading: var(--font-base);
  --font-hand:    "Kaisei Decol", serif;   /* 現状未使用（鶴村さん指示 2026-05-29）。使用時は要相談 */
  --font-mono:    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* ----- Typography: Size ----- */
  --fs-xxs:  11px;   /* ロゴ補助テキスト等の極小用途 */
  --fs-xs:   13px;
  --fs-sm:   15px;
  --fs-base: 17px;
  --fs-lg:   19px;
  --fs-xl:   21px;
  --fs-h1: clamp(29px, 5vw, 41px);
  --fs-h2: clamp(27px, 5vw, 39px);
  --fs-h3: clamp(19px, 3vw, 23px);
  --fs-h4: 19px;

  /* ----- Typography: Line-height & Weight ----- */
  --lh-tight:  1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.8;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;

  /* ----- Spacing (8px grid) ----- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  40px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8:  128px;

  /* ----- Layout ----- */
  --max-w-text:    720px;
  --max-w-wide:   1080px;
  --max-w-hero:   1200px;   /* ヒーロー専用：本文より広めの掴み */
  --max-w-full:   1280px;
  --gutter-mobile:  20px;
  --gutter-tablet:  32px;
  --gutter-desktop: 48px;

  /* ----- Radius ----- */
  --radius-sm:   6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-full: 9999px;

  /* ----- Shadow ----- */
  --shadow-1:     0 2px 8px rgba(0,0,0,0.06);
  --shadow-2:     0 8px 24px rgba(0,0,0,0.08);
  --shadow-focus: 0 0 0 3px rgba(42,111,79,0.25);

  /* ----- Border ----- */
  --border-thin:   1px solid var(--color-border);
  --border-accent: 2px solid var(--color-accent);

  /* ----- Size: Avatar（ヘッダー・プロフィール用） ----- */
  --size-avatar-sm:  36px;   /* ヘッダーロゴ画像（モバイル） */
  --size-avatar-md:  40px;   /* ヘッダーロゴ画像（PC, 600px+） */
  --size-avatar-lg:  80px;   /* profile-mini の写真 */

  /* ----- Layout: Sticky CTA ----- */
  --sticky-cta-space: 88px;  /* スマホでスティッキーCTA表示時の body 下部予約スペース */

  /* ----- Animation ----- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   0.15s;
  --duration-normal: 0.25s;
  --duration-slow:   0.4s;
}