/* SITE 109 LOUNGE CAST SCHEDULE — design tokens
   配色: チャコール #17191D / ホワイト #F4F4F1 / パープル #7563A8 / グレー #737A86
   角丸は 12px の1種類のみ（0 = 角丸なし）。影は2段階まで。
   本文用の淡色（--text-muted / --text-note）と、罫線・アイコン用の --gray は役割を分ける
   （--gray はチャコール上で約4.1:1のため、本文・注記の文字色には使わない）。 */
:root {
  /* --- color --- */
  --charcoal:      #17191D;
  --charcoal-deep: #101114;
  --surface:       #202329;
  --surface-2:     #292D35;
  --white:         #F4F4F1;
  --purple:        #7563A8;
  --purple-deep:   #5B4B86;
  --purple-light:  #B39DDD; /* 小さめ文字・リンク用（charcoal 上で 7.3:1） */
  --gray:          #737A86; /* 罫線・アイコン・大きめの装飾用（本文色には使わない） */

  --text:        var(--white);
  --text-muted:  #C7CCD2; /* charcoal 上で 9:1 台 */
  --text-note:   #9BA1AC; /* 注記用 charcoal 上で 6.7:1 */
  --line:        rgba(244, 244, 241, 0.14);
  --line-strong: rgba(244, 244, 241, 0.30);
  --focus:       #CBB9F2;

  --ok:      #82C79B;
  --warn:    #E2A96B;

  /* --- type --- */
  --font-en: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-ja: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  --fs-body:  1rem;      /* 16px */
  --fs-lead:  1.0625rem; /* 17px */
  --fs-note:  0.875rem;  /* 14px — 下限 */
  --fs-h1:    clamp(1.7rem, 1.15rem + 2.4vw, 2.5rem);
  --fs-h2:    clamp(1.375rem, 1.05rem + 1.4vw, 1.875rem);
  --fs-h3:    clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);

  --lh-body: 1.75;
  --lh-tight: 1.35;

  /* --- space --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 88px;

  /* --- layout --- */
  --wrap: 1160px;
  --gutter: 20px;
  --infobar-h: 40px;
  --header-h: 72px;
  --ctabar-h: 56px;   /* 48〜56px の範囲。safe-area は .cta-bar 側で加算する */

  /* --- shape --- */
  --radius: 12px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 16px 36px rgba(0, 0, 0, 0.5);

  /* --- motion（1種類: fade-up のみ） --- */
  --dur: 460ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 28px; }
}
@media (min-width: 1024px) {
  :root { --header-h: 80px; --gutter: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}