/* SITE 89 CABARET RECRUIT FOCUS — design tokens
   配色: アイボリー #FAF7F1 / チャコール #2B2B2A / ローズ #B86C78 / セージ #7A8A78
   書体: Zen Kaku Gothic New + Noto Sans JP（いずれもシステムフォールバック必須）
   角丸は 0 / 4 / 8 / 12 / 16 のうち 4 / 12 の2値だけを使う（混在させない）

   ローズ #B86C78 とセージ #7A8A78 は「面・罫線」専用。
   同じ色みで文字を置く場所には、コントラスト 4.5:1 以上を満たす
   --c-rose-deep / --c-sage-deep を使う（本文14px以上・注記14px以上の前提）。 */

:root {
  /* --- color --- */
  --c-paper: #FAF7F1;        /* ページ背景（アイボリー） */
  --c-paper-2: #F3EEE4;      /* セクション背景（1段沈める） */
  --c-paper-3: #EAE3D5;      /* 画像枠・入れ子面 */
  --c-card: #FFFFFF;         /* カード面 */
  --c-ink: #2B2B2A;          /* 主要文字（対 #FAF7F1 約 13.6:1） */
  --c-ink-2: #4A4844;        /* 見出し補助（対 #FAF7F1 約 8.5:1） */
  --c-muted: #6A665F;        /* 補助文字（対 #FAF7F1 約 5.0:1） */
  --c-rose: #B86C78;         /* アクセント1・面と罫線のみ */
  --c-rose-deep: #9A4C59;    /* アクセント1・文字と主ボタン（対 #FAF7F1 約 5.5:1） */
  --c-rose-tint: #F6EAEC;    /* ローズの淡面（文字は ink 系を載せる） */
  --c-sage: #7A8A78;         /* アクセント2・面と罫線のみ（求人モードの識別色） */
  --c-sage-deep: #4F6350;    /* アクセント2・文字（対 #FAF7F1 約 6.1:1） */
  --c-sage-tint: #E9EEE7;
  --c-line: #DDD5C6;
  --c-line-strong: #B7AD99;
  --c-ok: #2F6B45;           /* 営業中（対 #FAF7F1 約 6.4:1） */
  --c-alert: #A83A3A;        /* エラー・休業（対 #FAF7F1 約 5.9:1） */
  --c-on-accent: #FFFFFF;

  /* --- typography --- */
  --f-sans: "Zen Kaku Gothic New", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  --fs-body: 1rem;         /* 16px */
  --fs-body-lg: 1.0625rem; /* 17px 長文 */
  --fs-note: 0.875rem;     /* 14px 注記の下限 */
  --fs-label: 0.9375rem;   /* 15px */
  --fs-h1: clamp(1.75rem, 1.32rem + 1.7vw, 2.5rem);
  --fs-h2: clamp(1.375rem, 1.2rem + 0.7vw, 1.8125rem);
  --fs-h3: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --fs-h4: 1.0625rem;
  --fs-eyebrow: 0.8125rem; /* 13px 装飾英字ラベルのみ。同内容は必ず通常サイズで併記する */
  --fs-stat: clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem);

  --lh-tight: 1.32;
  --lh-heading: 1.45;
  --lh-body: 1.8;
  --lh-dense: 1.5;

  --ls-nav: 0.03em;
  --ls-eyebrow: 0.18em;
  --ls-body: 0.012em;

  /* --- spacing --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --section-y: clamp(44px, 5vw, 72px);

  /* --- layout --- */
  --container: 1120px;        /* MASTER §7 の 1120〜1280px の下限側。ヘッダーはこの幅に収める */
  --container-narrow: 820px;
  --gutter: clamp(16px, 3.4vw, 28px);
  /* PCヘッダーは MASTER §6 の 64〜80px に収める（実測 68px） */
  --header-h: 68px;
  /* アンカー着地位置。ヘッダー実測高＋余白。767px以下は responsive.css で 82px へ */
  --anchor-offset: 88px;
  /* PCでヘッダー直下に貼り付くモードバーの高さ（実測 56px）。
     767px以下と、features.recruit=false でバーごと消えるときは 0 に戻す。 */
  --mode-bar-h: 56px;
  /* 固定CTA。バー全体 = 上罫線1px + padding 3px×2 + タップ領域 48px = 55px（48〜56px） */
  --cta-h: 55px;
  --cta-tap: 48px;
  --cta-pad: 3px;

  /* --- radius（4 / 12 の2値のみ） --- */
  --r-s: 4px;
  --r-m: 12px;

  /* --- shadow（2段階まで） --- */
  --sh-1: 0 1px 2px rgba(43, 43, 42, 0.08);
  --sh-2: 0 12px 30px rgba(43, 43, 42, 0.16);

  /* --- motion（1種類: fade+slide） --- */
  --dur: 180ms;
  --dur-slow: 340ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 表示モード（来店 / 求人）で切り替わる識別色。
     求人モードではセージ、来店モードではローズを「現在地の色」として使う。 */
  --c-mode: var(--c-rose-deep);
  --c-mode-face: var(--c-rose);
  --c-mode-tint: var(--c-rose-tint);

  --z-header: 60;
  --z-sticky: 50;
  --z-cta: 70;
  --z-drawer: 90;
  --z-modal: 100;
}

body[data-audience="recruit"] {
  --c-mode: var(--c-sage-deep);
  --c-mode-face: var(--c-sage);
  --c-mode-tint: var(--c-sage-tint);
}

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