/* ============================================================
   SC / Shortcut  Design Tokens
   出典: SC_LP デザイン要件定義書 v2.0 (§2)
   このファイルはトークンの唯一の定義元。
   LP 側で値を直接書き換えることを禁止する（§15）。
   tokens.json と同一の定義から生成すること。
   ============================================================ */

:root{

  /* ---------- Color / Primary ---------- */
  --orange:        #F26522;
  --orange-light:  #FF8A4C;
  --orange-pale:   #FDEDE4;

  /* ---------- Color / Secondary（アイコン専用） ---------- */
  --green:         #3BA860;
  --purple:        #7C6BE8;

  /* ---------- Color / Background ---------- */
  --bg:            #FFFFFF;
  --blob-1:        #FDF0E6;
  --blob-2:        #FBE3D0;
  --blob-3:        #F8D5BC;
  --chat-bg:       #E8EDF7;

  /* ---------- Color / Text ---------- */
  --text:          #1F1F1F;
  --text-sub:      #5C5C5C;
  --text-muted:    #9A9A9A;

  /* ---------- Color / Surface & Line ---------- */
  --surface:       #FFFFFF;
  --border:        #EAEAEA;
  --border-strong: #2B2B2E;
  /* 端末の筐体。暗転画面（--border-strong）と同色だと輪郭が溶けるため黒で分ける */
  --phone-frame:   #000000;

  /* ---------- Brand (外部規定) ---------- */
  --line-green:    #06C755;

  /* ---------- Typography / Family ---------- */
  --font-round: "Zen Maru Gothic", "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN",
                "Yu Gothic", Meiryo, sans-serif;
  --font-logo:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  /* ---------- Typography / Weight ---------- */
  --w-black:   900;
  --w-bold:    700;
  --w-regular: 400;

  /* ---------- Typography / Scale (mobile → desktop) ---------- */
  --fs-hero:    clamp(46px, 6.4vw, 76px);
  --lh-hero:    1.22;
  --fs-h1:      clamp(30px, 3.4vw, 44px);
  --lh-h1:      1.38;
  --fs-h2:      clamp(20px, 1.9vw, 26px);
  --lh-h2:      1.5;
  --fs-lead:    clamp(16px, 1.35vw, 19px);
  --lh-lead:    1.8;
  --fs-body:    clamp(15px, 1.1vw, 16px);
  --lh-body:    1.9;
  --fs-card:    clamp(15px, 1.1vw, 16px);
  --lh-card:    1.6;
  --fs-caption: clamp(12px, .9vw, 13px);
  --lh-caption: 1.6;
  --fs-label:   clamp(11px, .85vw, 12px);
  --lh-label:   1.4;

  /* ---------- Typography / Tracking ---------- */
  --ls-hero: -0.01em;
  --ls-h1:   0;
  --ls-body: 0.02em;

  /* ---------- Radius ---------- */
  --r-card:    20px;   /* 浮遊カード */
  --r-balloon: 28px;   /* 吹き出し */
  --r-phone:   48px;   /* スマホ筐体 */
  --r-screen:  12px;   /* スマホ内カード */
  --r-icon:    12px;   /* アイコン枠 */
  --r-pill:    999px;  /* ボタン */

  /* ---------- Shadow（暖色を混ぜる） ---------- */
  --shadow-card:  0 6px 20px rgba(180,120,80,.12);
  --shadow-phone: 0 20px 60px rgba(0,0,0,.18);
  --shadow-soft:  0 2px 8px rgba(0,0,0,.05);
  --shadow-head:  0 2px 12px rgba(180,120,80,.10);

  /* ---------- Spacing (8px base) ---------- */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* ---------- Layout ---------- */
  --max-w:      1280px;
  --pad-x:      24px;   /* mobile  (§9.3) */
  --header-h:   64px;   /* mobile  (§8.1) */
  --sec-y:      var(--sp-12);   /* mobile  96px (§9.4) */
  --gap-head:   var(--sp-3);    /* 見出し〜本文 24px */
  --phone-w:    min(78vw, 300px);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur:  400ms;
  --dur-slide: 500ms;
  --dur-draw:  600ms;
  --dur-swap:  400ms;
}

@media (min-width:1024px){
  :root{
    --pad-x:    64px;
    --header-h: 80px;
    --sec-y:    160px;
    --gap-head: var(--sp-4);
    --phone-w:  312px;
  }
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur:0ms; --dur-slide:0ms; --dur-draw:0ms; --dur-swap:0ms; }
}