@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 orange（メインアクションボタン） ──────────────────────── */
  --ka-orange:         #d95000;
  --ka-orange-hover:   #c34800;
  --ka-orange-pressed: #ab3f00;
  --ka-orange-soft:    #fff2e8;

  /* ── Brand salmon（ブランドのサーモンピンク：枠・カレンダー・アクセント） */
  --ka-salmon:       #e08380;
  --ka-salmon-hover: #d46e6b;
  --ka-salmon-soft:  #fff8f5;   /* 薄いウォーム白背景 */
  --ka-salmon-tint:  #fdeae7;   /* ホバー時のほんのりピンク */

  /* ── Warm accent（暖色アクセント：メニューカード・スタッフカード等） ── */
  --ka-accent:        #ed9e72;
  --ka-accent-strong: #d56d2f;
  --ka-accent-dark:   #b84c00;
  --ka-accent-soft:   #fff3eb;

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

  /* ── Background ───────────────────────────────────────────────────── */
  --ka-bg:          #f5f1eb;  /* ページ背景（濃いめベージュ） */
  --ka-bg-white:    #ffffff;
  --ka-bg-soft:     #faf8f5;  /* 薄い白（カード等） */
  --ka-bg-warm:     #faf8f5;  /* 暖色系の薄白（ステップカード等） */
  --ka-bg-header:   #f5f2ee;  /* テーブルヘッダー・カレンダー曜日行 */

  /* ── Border / Line ────────────────────────────────────────────────── */
  --ka-line:            #e8ddd3;  /* 標準ライン */
  --ka-line-strong:     #d5c6ba;  /* 強調ライン */
  --ka-line-warm:       #f0e6e0;  /* ウォームな枠線（サーモン系） */
  --ka-line-warm-soft:  #f5f0ee;  /* さらに薄いウォーム枠線 */
  --ka-line-neutral:    #dee2e6;  /* ニュートラルグレー枠線 */
  --ka-line-steel:      #8795a4;  /* スチールブルー枠線（ステップバー） */
  --ka-line-steel-soft: #cfd8e1;  /* スチールブルー薄枠線 */

  /* ── Accent colors ────────────────────────────────────────────────── */
  --ka-gold:        #b89a72;  /* ゴールド（ランク表示等） */
  --ka-coral:       #e58a76;  /* コーラル */
  --ka-warm-brown:  #b08870;  /* ウォームブラウン（ラベル・役職） */

  /* ── 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:          #5A534D;   /* ウォームダークブラウン */
  --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(181, 95, 47, 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));
}