/* KYABEL v6 / SITE 102 — SNACK RECRUIT FOCUS / tokens.css
   配色: アイボリー #FCF8F0 / ブラウン #413932 / ピンク #B87582 / グリーン #6F806D
   書体: Zen Maru Gothic（見出し） + Noto Sans JP（本文）
   角丸: 8px に統一（MASTER §8「1サイト内で混在させない」）。丸みのある書体に合わせ、
        隣接する97(4px)・103(想定)とは異なる角丸値にして密度差も作る。
   影 : 2段階まで
   ------------------------------------------------------------------
   コントラスト実測（対 #FCF8F0、WCAG相対輝度式で算出）
     --c-ink          #413932 → 10.7:1
     --c-ink-soft     #6B6058 → 5.8:1
     --c-accent-tx    #8E4657 → 6.3:1
     --c-accent       #B87582 → 3.4:1（罫線・バッジ等の面のみ。本文・白文字ボタンには使わない）
     --c-green-tx     #4C5A49 → 6.9:1
     --c-green        #6F806D → 4.0:1（罫線・バッジ等の面のみ。本文・白文字ボタンには使わない）
     白文字を乗せるボタン面（対白）
     --c-accent-deep  #7A3B49 → 8.2:1
     --c-green-deep   #3E4A3C → 9.3:1
*/

:root {
  /* 色 */
  --c-bg:          #FCF8F0;
  --c-bg-deep:     #F3EBDA;
  --c-surface:     #FFFEFA;
  --c-surface-alt: #FBF4E8;

  --c-ink:         #413932;
  --c-ink-soft:    #6B6058;

  /* ピンク: 来店・一般CTA用のメインアクセント。
     #B87582 はSNACK102指定色そのもの（罫線・バッジ等の面・装飾用、白文字は乗せない）。
     ボタン等「白文字を乗せる面」は必ず --c-accent-deep 系を使う（対白 8.2:1 / 3.6:1 の差はここで吸収）。 */
  --c-accent:        #B87582;
  --c-accent-tx:     #8E4657;
  --c-accent-deep:   #7A3B49;
  --c-accent-deep-2: #5F2E39;
  --c-accent-wash:   #F7E7E9;

  /* グリーン: 求人・応募導線専用のセカンドアクセント（誤誘導防止のため色で区別する）。
     #6F806D はSNACK102指定色そのもの（罫線・バッジ等の面・装飾用、白文字は乗せない）。
     ボタン等「白文字を乗せる面」は必ず --c-green-deep 系を使う。 */
  --c-green:        #6F806D;
  --c-green-tx:     #4C5A49;
  --c-green-deep:   #3E4A3C;
  --c-green-deep-2: #2E362D;
  --c-green-wash:   #E9EDE6;

  --c-line:        #E4D9C4;
  --c-line-soft:   #EFE7D7;

  --c-ok:          #3F6B4F;
  --c-warn:        #A24B3B;

  --c-focus:       #8E4657;

  /* 文字 */
  --f-serif: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --f-sans:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;

  --fs-body:   1rem;      /* 16px */
  --fs-small:  0.875rem;  /* 14px 最小 */
  --fs-lead:   1.0625rem; /* 17px */
  --fs-h1:     clamp(1.625rem, 1.15rem + 2.1vw, 2.5rem);
  --fs-h2:     clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --fs-h3:     clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-h4:     1.0625rem;
  --fs-price:  clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);

  --lh-heading: 1.45;
  --lh-body:    1.75;
  --lh-tight:   1.5;

  --ls-body:  0.01em;
  --ls-label: 0.08em;

  /* 余白 */
  --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;

  /* 幅 */
  --w-container: 1120px;
  --w-narrow:    760px;
  --w-pad:       20px;

  /* 高さ */
  --h-header:     72px;
  --h-header-sp:  60px;
  --h-ctabar:     56px;
  --h-tap:        44px;

  /* 角丸・影 */
  --r: 8px;
  --sh-1: 0 1px 2px rgba(65, 57, 50, 0.06), 0 2px 8px rgba(65, 57, 50, 0.06);
  --sh-2: 0 4px 10px rgba(65, 57, 50, 0.10), 0 12px 28px rgba(65, 57, 50, 0.10);

  /* モーション（このサイトは fade-up 1種のみ） */
  --t-fast: 140ms;
  --t-base: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
}

html { font-size: 100%; }

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-serif);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: 0.01em;
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--c-accent-wash); }