/* ============================================================
   01-tokens.css  ―  デザイントークン（色・余白・字・影）
   ------------------------------------------------------------
   ここの変数を書き換えるだけで、サイト全体の色味が変わります。
   ベースカラーは公式サイト（snack-yoridokoro.com）に準拠。
   ============================================================ */

:root {
  /* ---------- ブランドカラー（公式サイト準拠） ---------- */
  --c-bg:        #560002;  /* 基本の背景（ディープレッド） */
  --c-bg-deep:   #3d0002;  /* さらに濃い背景 */
  --c-bg-soft:   #6b0a0c;  /* 少し明るい背景 */
  --c-text:      #f6ecdf;  /* 基本の文字（クリーム） */
  --c-text-dim:  rgba(246, 236, 223, .72);
  --c-pink:      #ff4d9d;
  --c-pink-soft: #ff8fc2;
  --c-gold:      #f5c761;
  --c-cream:     #f3e9d6;
  --c-brown:     #4a2c20;

  /* ---------- ポップ側の追加色（ネオン） ---------- */
  --c-violet:    #a06bff;
  --c-cyan:      #5ee7ff;
  --c-mint:      #7ef0c0;
  --c-orange:    #ff9a3c;

  /* ---------- 機能色 ---------- */
  --c-line:      #06c755;  /* LINEブランドカラー */
  --c-line-dark: #04a445;
  --c-ng:        rgba(246, 236, 223, .45);
  --c-ok:        var(--c-gold);

  /* ---------- 面・線 ---------- */
  --c-panel:        rgba(255, 255, 255, .055);
  --c-panel-strong: rgba(255, 255, 255, .1);
  --c-border:       rgba(246, 236, 223, .18);
  --c-border-soft:  rgba(246, 236, 223, .1);

  /* ---------- フォント ---------- */
  --f-base: "Kaisei Decol", "Hiragino Mincho ProN", "Yu Mincho", serif;   /* 公式と同じ */
  --f-pop:  "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;    /* まるっとポップ */
  --f-dela: "Dela Gothic One", "Hiragino Sans", sans-serif;                /* 太い見出し */
  --f-num:  "Baloo 2", "Kaisei Decol", sans-serif;                         /* 数字 */

  /* ---------- タイポスケール（スマホ基準・clampでPCへ拡張） ---------- */
  --fs-hero:  clamp(2rem, 8.2vw, 3.6rem);
  --fs-h2:    clamp(1.45rem, 5.6vw, 2.5rem);
  --fs-h3:    clamp(1.1rem, 4.2vw, 1.5rem);
  --fs-lead:  clamp(1rem, 3.9vw, 1.22rem);
  --fs-body:  clamp(.94rem, 3.8vw, 1.06rem);
  --fs-small: clamp(.82rem, 3.4vw, .94rem);
  --fs-num:   clamp(2.4rem, 11vw, 4rem);
  --fs-en:    clamp(.78rem, 3.1vw, .9rem);

  /* ---------- 余白 ---------- */
  --sp-xs: .35rem;
  --sp-s:  .75rem;
  --sp-m:  1.25rem;
  --sp-l:  2rem;
  --sp-xl: 3rem;
  --sp-2xl: clamp(3.5rem, 12vw, 6.5rem);   /* セクション上下 */

  /* ---------- レイアウト ---------- */
  --w-max:     1080px;
  --w-narrow:  720px;
  --gutter:    clamp(1rem, 5vw, 2rem);
  --header-h:  76px;   /* メニューバーの高さ */
  --cta-h:     72px;   /* スマホ下部固定CTAの高さ */

  /* ---------- 角丸 ---------- */
  --r-s:  8px;
  --r-m:  14px;
  --r-l:  22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- 影 / グロー ---------- */
  --sh-card:  0 10px 30px rgba(0, 0, 0, .35);
  --sh-pop:   0 6px 0 rgba(0, 0, 0, .28);
  --glow-pink:  0 0 12px rgba(255, 77, 157, .75), 0 0 34px rgba(255, 77, 157, .38);
  --glow-gold:  0 0 12px rgba(245, 199, 97, .7),  0 0 30px rgba(245, 199, 97, .3);
  --glow-cyan:  0 0 12px rgba(94, 231, 255, .7),  0 0 30px rgba(94, 231, 255, .3);

  /* ---------- イージング / 時間 ---------- */
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);
  --ease-pop:    cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .2s;
  --t-mid:  .45s;
  --t-slow: .9s;

  /* ---------- レイヤー ---------- */
  --z-bg:      0;
  --z-body:    1;
  --z-sticky:  50;
  --z-header:  80;
  --z-cta:     90;
  --z-loader:  120;
}

/* 動きを減らす設定の端末では、演出を最小限に */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: .01ms; --t-mid: .01ms; --t-slow: .01ms; }
}