/* ================================================================
 * WM Club — Design Tokens (CSS Custom Properties)
 * Figma: https://www.figma.com/design/ToOxHYTupP2u7UaW60IpBF/WEB
 * ============================================================== */

:root {
  /* -------- Colors : Primary (teal) -------- */
  --color-primary:          #1fa6c1;
  --color-primary-dark:     #006d83;
  --color-primary-darker:   #007c91;
  --color-primary-darkest:  #013e4b;
  --color-primary-mid:      #1d99b2;   /* ヘッダーリボン・フッター帯 */
  --color-primary-shade:    #1d8ca2;
  --color-primary-bright:   #2bbed6;
  --gradient-primary:       linear-gradient(to right, #1fa6c1, #006d83);

  /* Tints */
  --color-tint-lightest:    #ecfcff;
  --color-tint-light:       #d1f1f7;
  --color-tint-medium:      #c7edf4;

  /* -------- Colors : Accent (yellow / orange) -------- */
  --color-accent-yellow:    #ffd447;   /* カンタン申込 CTA */
  --color-accent-yellow-soft:#fff6e4;
  --color-accent-gold:      #f4c430;
  --color-accent-orange:    #ff6e05;   /* 10秒バッジ */
  --color-accent-orange-b:  #f29f05;

  /* -------- Colors : Semantic -------- */
  --color-price-red:        #e01b1f;   /* ¥ 価格強調 */

  /* Neutrals */
  --color-text:             #222;
  --color-text-muted:       #666;
  --color-text-light:       #999;
  --color-white:            #fff;
  --color-bg-gray:          #f5f5f5;
  --color-bg-gray-soft:     #f9f9f9;
  --color-border:           #e5e5e5;
  --color-border-light:     #d9d9d9;

  /* Overlays */
  --color-overlay-dark:     rgba(34,34,34,.5);
  --color-overlay-teal-80:  rgba(0,109,131,.8);

  /* -------- Typography -------- */
  --font-jp-heading: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-jp-body:    "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-jp-mincho:  "BIZ UDMincho", "Yu Mincho", serif;
  --font-en:         "Inter", system-ui, sans-serif;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* Type scale (PC) */
  --fs-hero-num: 100px;
  --fs-hero-jp:  82px;
  --fs-h1:       72px;
  --fs-h2:       54px;
  --fs-h3:       40px;
  --fs-h4:       32px;
  --fs-price-lg: 48px;
  --fs-xl:       28px;
  --fs-lg:       24px;
  --fs-md:       20px;
  --fs-base:     18px;
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-xs:       12px;

  --lh-tight:   1.2;
  --lh-snug:    1.5;
  --lh-relaxed: 1.8;

  /* -------- Spacing -------- */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-60:  60px;
  --sp-80:  80px;
  --sp-100: 100px;
  --sp-120: 120px;

  /* -------- Layout -------- */
  --container:      1200px;
  --container-wide: 1400px;

  /* -------- Radius -------- */
  --radius-sm:    5px;
  --radius-md:    8px;
  --radius-lg:    10px;
  --radius-xl:    16px;
  --radius-pill:  50px;
  --radius-circle:9999px;

  /* -------- Shadow -------- */
  --shadow-card:   0 10px 20px 0 rgba(34,34,34,.25);
  --shadow-card-s: 0 4px 4px 0 rgba(0,0,0,.25);
  --shadow-button-teal: 0 8px 0 0 #1d8ca2;
  --shadow-button-gray: 0 4px 0 0 #d9d9d9;
  --shadow-button-dark: 0 6px 0 0 rgba(34,34,34,.25);
  --shadow-header: 0 4px 20px 0 rgba(0,0,0,.25);
  --shadow-text:   0 4px 4px rgba(0,0,0,.25);

  /* -------- Motion -------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
}

/* モバイル用の縮小値（768px未満で上書き） */
@media (max-width: 768px) {
  :root {
    --fs-hero-num: 48px;
    --fs-hero-jp:  43px;
    --fs-h1:       36px;
    --fs-h2:       28px;
    --fs-h3:       22px;
    --fs-h4:       20px;
    --fs-price-lg: 28px;
    --fs-xl:       20px;
    --fs-lg:       18px;
    --fs-md:       16px;
    --fs-base:     15px;
    --fs-body:     14px;
    --fs-sm:       13px;
    --fs-xs:       11px;

    --sp-80:       48px;
    --sp-100:      60px;
    --sp-120:      72px;
  }
}