:root {
  /* === Color === */
  --color-primary:      #c8182a;
  --color-primary-dark: #9a0f1f;
  --color-primary-soft: #ffe9eb;
  --color-accent:       #c28a3a;
  --color-accent-soft:  #e8d5a8;
  --color-bg:           #ffffff;
  --color-bg-cream:     #f8ebd8;
  --color-text:         #222222;
  --color-text-sub:     #666666;
  --color-success:      #06c755;   /* 営業中バッジ */
  --color-rank:         #e8b93a;   /* 番号バッジ (リボン) */
  --color-standby-bg:   #fe383c;   /* 待機中バッジの鮮やかな赤 */
  --color-band-jobs:    #8a8a8a;   /* 求人情報のグレー帯 */
  --color-band-news:    var(--color-accent);  /* お知らせ・その他情報のオレンジ帯 */
  --color-detail-tag:   #6e6e6e;   /* 仕様グリッドのタグ部背景 */
  --color-border:       #e5e5e5;
  --color-star:         #f6b400;

  /* === Typography === */
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --lh-tight: 1.4;
  --lh-base:  1.7;

  /* === Spacing === */
  --sp-2:  8px;  --sp-3: 12px;
  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;
  --sp-7: 48px;  --sp-8: 64px;

  /* === Radius === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-pill: 999px;

  /* === Shadow === */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-btn:  0 4px 0 var(--color-primary-dark);

  /* === Layout === */
  --container:     1200px;
  --header-h:      90px;
  --header-h-sp:   56px;
  --bottom-nav-h:  64px;
}