/* ============================================================
 * theme.css — サイト全体のデザイントークン（色・形状・余白サイズ・フォント）
 *
 * ここに定義した値だけがサイトの「色」等の唯一の情報源（single source of
 * truth）。root(/) ・ salon(/salon/) の静的ページと、damage/mypage/
 * buddy-search の各Reactアプリの全てがこのファイルを読み込む。
 * 配色を変えたい時はこのファイルだけを直せば全ページに反映される。
 *
 * 個々のページ固有の色（例: サロンページの軸カラーA/B/C/D）は、
 * このファイルには置かず、各ページ側のCSSに --page-* のような名前で
 * 追加する（このファイルを汚さないため）。
 * ============================================================ */

:root {
    /* --- カラー --- */
    --c-bg: #f0f2f5;
    --c-surface: #ffffff;
    --c-surface-alt: #f1f3f4;
    --c-border: #dadce0;
    --c-text: #333333;
    --c-text-muted: #666666;
    --c-text-faint: #999999;

    --c-primary: #3498db;
    --c-primary-dark: #2980b9;
    --c-primary-bg: #e8f2fb;
    --c-danger: #e74c3c;
    --c-danger-bg: #fdecea;
    --c-success: #27ae60;
    --c-success-bg: #e8f8ed;
    --c-dev: #c9720a;
    --c-dev-bg: #fdf0e0;

    /* --- 形状・影 --- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.06), 0 1px 1px rgba(20, 24, 40, 0.04);
    --shadow-md: 0 6px 20px rgba(20, 24, 40, 0.10);
    --shadow-lg: 0 12px 32px rgba(20, 24, 40, 0.16);

    /* --- シェルのサイズ --- */
    --shell-topbar-h: 56px;
    --shell-rail-w: 56px;
    --shell-panel-w: 340px;

    /* --- フォント --- */
    --font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", sans-serif;
}