/* =========================================================
   SITE 119 — CONCAFE RECRUIT FOCUS / デザイントークン
   配色: アイボリー #FFF9F2 / パープル #8065B3 / ピンク #CF718F / チャコール #303038
   書体: Noto Sans JP（システムフォールバック必須。装飾書体は使わず、太さ・字間で階層をつける）
   角丸: 8px に統一（0/4/8/12/16 のうち 8 を採用。混在させない）
   影  : 2段階まで

   来店モードは --c-mode をパープル、求人モードはピンクへ切り替える。
   カラーで面・罫線だけを分け、文字色は常にコントラスト基準を満たす
   --c-purple-deep / --c-pink-deep を使う（本文16px以上・注記14px以上の前提）。
   ========================================================= */
:root {
  /* --- 基本色 --- */
  --c-ivory: #fff9f2;
  --c-ivory-2: #fff3e6;
  --c-ivory-3: #f7ead8;
  --c-card: #ffffff;
  --c-purple: #8065b3;
  --c-purple-deep: #5b3f8c;      /* 対 #FFF9F2 約 7.7:1（文字・主ボタン用） */
  --c-purple-tint: #efe9f7;
  --c-pink: #cf718f;
  --c-pink-deep: #a13d5c;        /* 対 #FFF9F2 約 6.1:1（文字・求人モード用） */
  --c-pink-tint: #f9ebef;
  --c-charcoal: #303038;
  --c-ink: #303038;              /* 対 #FFF9F2 約 14.5:1 */
  --c-ink-2: #4c4b56;            /* 対 #FFF9F2 約 9.0:1 */
  --c-muted: #6c6a76;            /* 対 #FFF9F2 約 5.4:1 */
  --c-line: #e6dccb;
  --c-line-strong: #cdbfa4;
  --c-ok: #2f6b45;               /* 対 #FFF9F2 約 6.6:1 */
  --c-alert: #a8393a;            /* 対 #FFF9F2 約 6.2:1 */
  --c-on-accent: #ffffff;
  --c-focus: #5b3f8c;

  /* --- 書体（Noto Sans JP 単一。太さと字間で階層を作る） --- */
  --f-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;

  /* --- 文字サイズ（14px未満を作らない） --- */
  --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.28rem + 1.9vw, 2.5rem);
  --fs-h2: clamp(1.375rem, 1.18rem + 0.8vw, 1.8125rem);
  --fs-h3: clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem);
  --fs-h4: 1.0625rem;
  --fs-eyebrow: 0.8125rem;  /* 13px 装飾英字ラベルのみ。同内容は必ず通常サイズで併記する */
  --fs-stat: clamp(1.5rem, 1.28rem + 0.9vw, 1.9375rem);

  --lh-tight: 1.34;
  --lh-heading: 1.5;
  --lh-body: 1.8;
  --lh-dense: 1.55;

  --ls-nav: 0.02em;
  --ls-eyebrow: 0.16em;
  --ls-heading: 0.01em;

  /* --- 余白 --- */
  --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(40px, 5vw, 68px);

  /* --- 幅 --- */
  --container: 1160px;
  --container-narrow: 800px;
  --gutter: clamp(16px, 3.4vw, 28px);

  /* --- 部品寸法 --- */
  --header-h: 72px;
  --anchor-offset: 84px;
  --mode-bar-h: 52px;
  --cta-h: 56px;
  --cta-tap: 48px;
  --cta-pad: 4px;
  --tap: 44px;

  /* --- 角丸（8px 統一） --- */
  --r-s: 8px;
  --r-m: 8px;

  /* --- 影（2段階まで） --- */
  --sh-1: 0 1px 2px rgba(48, 48, 56, 0.08);
  --sh-2: 0 10px 28px rgba(48, 48, 56, 0.14);

  /* --- モーション（1種類: fade+slide。reduced-motion で無効） --- */
  --dur: 200ms;
  --dur-slow: 340ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 表示モード（来店 / 求人）で切り替わる識別色 */
  --c-mode: var(--c-purple-deep);
  --c-mode-face: var(--c-purple);
  --c-mode-tint: var(--c-purple-tint);

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

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

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

html { font-size: 100%; }

body {
  background: var(--c-ivory);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

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

strong { font-weight: 700; }

.num, time, .price, .tel { font-variant-numeric: tabular-nums; }