@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+SC:wght@300;400;600&family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap');
/*==============================================================================
  Design Tokens — kakimoto arms reservation system
  カラー・シャドウ・角丸・アニメーション等、全デザイン値の唯一の定義元。
  必ず他の CSS より前に読み込むこと。
  File: common/css/tokens.css
==============================================================================*/

:root {

  /* ── CTA / Brand teal（メインアクションボタン） ──────────────────────── */
  --ka-orange:         #638183;
  --ka-orange-hover:   #4e696b;
  --ka-orange-pressed: #3c5456;
  --ka-orange-soft:    #eaf2f3;

  /* ── Brand blue（ブランドブルー：枠・カレンダー・アクセント） */
  --ka-salmon:       #85adc1;
  --ka-salmon-hover: #6d99b0;
  --ka-salmon-soft:  #f0f6fb;   /* 薄いクール白背景 */
  --ka-salmon-tint:  #e4f0f7;   /* ホバー時のほんのりブルー */

  /* ── Cool accent（寒色アクセント：メニューカード・スタッフカード等） ── */
  --ka-accent:        #85adc1;
  --ka-accent-strong: #638183;
  --ka-accent-dark:   #4e696b;
  --ka-accent-soft:   #edf5f9;

  /* ── Text ─────────────────────────────────────────────────────────── */
  --ka-ink:        #1e2d30;  /* 本文・見出し（最も濃い） */
  --ka-ink-soft:   #364d50;  /* やや明るい本文 */
  --ka-subtext:    #556669;  /* サブテキスト */
  --ka-muted:      #8fa6a8;  /* 薄いテキスト */
  --ka-text-gray:  #727171;  /* 中間グレー（メニュー・スタッフ補足） */
  --ka-text-med:   #6f6f73;  /* ステップバー等で使う中間グレー */
  --ka-text-strong:#57575c;  /* ステップバー等で使う濃いグレー */

  /* ── Background ───────────────────────────────────────────────────── */
  --ka-bg:          #f4f8fb;  /* ページ背景 */
  --ka-bg-white:    #ffffff;
  --ka-bg-soft:     #f8fbfc;  /* 薄い白（カード等） */
  --ka-bg-warm:     #f5f9fb;  /* クール系の薄白（ステップカード等） */
  --ka-bg-header:   #eef4f8;  /* テーブルヘッダー・カレンダー曜日行 */

  /* ── Border / Line ────────────────────────────────────────────────── */
  --ka-line:            #cdd8df;  /* 標準ライン */
  --ka-line-strong:     #b0c4ce;  /* 強調ライン */
  --ka-line-warm:       #c8dce6;  /* クールな枠線 */
  --ka-line-warm-soft:  #daeaf1;  /* さらに薄いクール枠線 */
  --ka-line-neutral:    #dee2e6;  /* ニュートラルグレー枠線 */
  --ka-line-steel:      #8795a4;  /* スチールブルー枠線（ステップバー） */
  --ka-line-steel-soft: #cfd8e1;  /* スチールブルー薄枠線 */

  /* ── Accent colors ────────────────────────────────────────────────── */
  --ka-gold:        #638183;  /* ティール（ランク表示等） */
  --ka-coral:       #85adc1;  /* ブルー */
  --ka-warm-brown:  #638183;  /* ティール（ラベル・役職） */

  /* ── Men's site brand ─────────────────────────────────────────────── */
  --ka-mens:      #85adc1;
  --ka-mens-dark: #638183;

  /* ── State colors ──────────────────────────────────────────────────── */
  --ka-disabled-bg:     #ebebeb;  /* 予約不可セル背景 */
  --ka-disabled-strong: #d9d9d9;  /* 無効ボタン背景 */
  --ka-disabled-text:   #bbb;     /* 無効テキスト */

  /* ── Footer ──────────────────────────────────────────────────────── */
  --ka-footer-bg:          #484848;   /* 公式サイトフッターに合わせたダークチャコール */
  --ka-footer-text:        rgba(255, 255, 255, 0.55);  /* サブリンク・著作権 */
  --ka-footer-text-bright: #ffffff;   /* メインリンク */
  --ka-footer-border:      rgba(255, 255, 255, 0.15);  /* 仕切り線 */

  /* ── Weekday colors（カレンダー曜日）──────────────────────────────── */
  --ka-weekday-sun: #e05555;
  --ka-weekday-sat: #3366cc;

  /* ── Shape ─────────────────────────────────────────────────────────── */
  --ka-radius-sm:   8px;
  --ka-radius-card: 10px;
  --ka-radius-md:   14px;
  --ka-radius-lg:   18px;
  --ka-radius-pill: 999px;

  /* ── Shadow ─────────────────────────────────────────────────────────── */
  --ka-shadow-soft:       0 10px 30px rgba(51, 45, 40, 0.08);
  --ka-shadow-hover:      0 16px 36px rgba(51, 45, 40, 0.13);
  --ka-shadow-card:       0 2px 8px rgba(0, 0, 0, 0.07);
  --ka-shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.13);
  --ka-shadow-modal:      0 10px 24px rgba(126, 113, 99, 0.12);
  --ka-shadow-btn:        0 3px 0 rgba(70, 110, 115, 0.9);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ka-transition: 220ms cubic-bezier(.2, .8, .2, 1);

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-ja:    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-ka:    var(--font-ja);

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --reservation-content-width: min(1080px, calc(100vw - 32px));
}