/**
 * Qmitate Design Tokens
 *
 * 全画面共通のデザイントークン (色 / 余白 / タイポ / 影) を CSS カスタムプロパティで一元化。
 * staff-portal.css / qmitate-ui.css / Falcon CSS から参照することで、
 * デザイン変更を 1 箇所で完結させる。
 *
 * 使い方:
 *   color: var(--qm-text-muted);
 *   padding: var(--qm-space-4);
 *   font-size: var(--qm-fs-1);
 *   box-shadow: var(--qm-shadow-md);
 *
 * 参照優先順位 (上書きは右側が勝ち):
 *   1. Falcon variables (--falcon-primary 等) — vendor 提供
 *   2. Qmitate tokens (--qm-*) — 本ファイル
 *   3. Component-local override (.staff-navbar 内等)
 *
 * 設計方針:
 *   - 色は WCAG AA 担保 (text 4.5:1 / large text 3:1)
 *   - 余白は 4px グリッド (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64)
 *   - タイポは Falcon の fs--2 〜 fs-3 と整合
 */

:root {
    /* ───────── COLOR — Brand: Pure Horizon ─────────
       forest を主軸、brass を小さなアクセント、porcelain/mist を余白に使う。 */
    --qm-brand-forest:      #0e221d;     /* 主軸 — 静かな深緑 */
    --qm-brand-forest-2:    #18352d;     /* hover / lifted surface */
    --qm-brand-brass:       #a88f63;     /* アクセント — 抑えた真鍮 */
    --qm-brand-brass-dark:  #6f5a3b;     /* brass hover / AA text */
    --qm-brand-porcelain:   #f9f8f3;     /* 高級サロン向けの静かな余白 */
    --qm-brand-mist:        #dde8e1;     /* 補助面 / subtle border */
    --qm-brand-slate:       #596a73;     /* 補助テキスト */

    /* 互換 alias: 既存 view の class 名は維持し、色だけ Pure Horizon に寄せる */
    --qm-brand-rose:        var(--qm-brand-brass);
    --qm-brand-rose-hover:  var(--qm-brand-brass-dark);
    --qm-brand-rose-light:  #cbb88d;
    --qm-brand-champagne:   var(--qm-brand-porcelain);
    --qm-brand-primary:     var(--qm-brand-forest);
    --qm-brand-success:     #117c43;     /* 成功 / 達成 — 5.07:1 */
    --qm-brand-warning:     #876a14;     /* 警告 / 入力中 — 5.05:1 */
    --qm-brand-danger:      #c52b25;     /* エラー / 危険 — 5.95:1 */
    --qm-brand-info:        #0c63a4;     /* 情報 / 提出済 — 7.05:1 */

    /* ───────── COLOR — セマンティック ───────── */
    /* ───────── COLOR — Neutral scale ───────── */
    --qm-neutral-0:         #ffffff;
    --qm-neutral-50:        #fbfaf6;
    --qm-neutral-100:       #f4f1ea;
    --qm-neutral-200:       #e7e2d8;
    --qm-neutral-300:       #d6cfc2;
    --qm-neutral-400:       #a59c8e;
    --qm-neutral-500:       #7a7368;
    --qm-neutral-600:       #596a73;
    --qm-neutral-700:       #394842;
    --qm-neutral-800:       #21352f;
    --qm-neutral-900:       #0e221d;

    --qm-text-default:      var(--qm-neutral-900);
    --qm-text-muted:        var(--qm-neutral-600);
    --qm-text-subtle:       var(--qm-neutral-500);
    --qm-text-inverse:      #ffffff;     /* 暗い背景上の白文字 */

    /* ───────── COLOR — セクションバッジ (ペルソナ別) ───────── */
    --qm-badge-personal-bg:    rgba(14, 34, 29, 0.10);
    --qm-badge-personal-fg:    var(--qm-brand-forest);
    --qm-badge-salon-bg:       rgba(168, 143, 99, 0.16);
    --qm-badge-salon-fg:       var(--qm-brand-brass-dark);
    --qm-badge-comparison-bg:  rgba(47, 125, 90, 0.12);
    --qm-badge-comparison-fg:  #2f7d5a;

    /* ───────── COLOR — Background / Border ───────── */
    --qm-bg-body:           var(--qm-brand-porcelain);
    --qm-bg-card:           var(--qm-neutral-0);
    --qm-bg-tertiary:       var(--qm-neutral-50);
    --qm-bg-table-thead:    var(--qm-neutral-100);
    --qm-border-default:    var(--qm-neutral-200);
    --qm-border-light:      var(--qm-brand-mist);

    /* ───────── SPACING (4px グリッド) ───────── */
    --qm-space-1:    4px;
    --qm-space-2:    8px;
    --qm-space-3:    12px;
    --qm-space-4:    16px;
    --qm-space-5:    24px;
    --qm-space-6:    32px;
    --qm-space-7:    48px;
    --qm-space-8:    64px;

    /* ───────── TYPOGRAPHY ───────── */
    --qm-font-base:    'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;

    /* font-size — Falcon と整合: fs--2=10.5px / fs--1=12.6px / 14px (default) / fs-1=15.4px */
    --qm-fs-xs:    10.5px;       /* fs--2 */
    --qm-fs-sm:    12.6px;       /* fs--1 */
    --qm-fs-base:  14px;
    --qm-fs-1:     15.4px;       /* fs-1 */
    --qm-fs-2:     17.5px;       /* fs-2 */
    --qm-fs-3:     21px;         /* fs-3 (h6 同等) */
    --qm-fs-4:     24.5px;       /* h5 同等 */
    --qm-fs-5:     28px;         /* h4 同等 */
    --qm-fs-display: 36px;       /* ヒーロー数値 */

    --qm-fw-regular:   400;
    --qm-fw-medium:    500;
    --qm-fw-semi:      600;
    --qm-fw-bold:      700;

    /* ───────── BORDER RADIUS ───────── */
    --qm-radius-sm:   4px;       /* タグ / バッジ */
    --qm-radius:      8px;       /* ボタン / 入力 */
    --qm-radius-md:   12px;      /* カード */
    --qm-radius-lg:   16px;      /* stat-card / hero card */
    --qm-radius-pill: 9999px;    /* pill button */

    /* ───────── SHADOW ───────── */
    --qm-shadow-sm:   0 1px 4px rgba(0, 0, 0, 0.07);                /* navbar */
    --qm-shadow-md:   0 2px 8px rgba(0, 0, 0, 0.08);                /* stat-card */
    --qm-shadow-lg:   0 8px 24px rgba(14, 34, 29, 0.12);            /* modal / hero */
    --qm-shadow-rose: 0 8px 24px rgba(168, 143, 99, 0.20);          /* CTA hero */

    /* ───────── ANIMATION ───────── */
    --qm-transition-fast: 0.15s ease-out;
    --qm-transition:      0.2s ease-out;
    --qm-transition-slow: 0.3s ease-out;

    /* ───────── Z-INDEX (用途別の層構造) ───────── */
    --qm-z-content:       1;
    --qm-z-sticky-bar:    999;       /* SP スティッキーサマリー */
    --qm-z-navbar:        1000;      /* 上部ナビ */
    --qm-z-bottom-nav:    1000;      /* SP ボトムナビ */
    --qm-z-sticky-save:   1020;      /* sticky save bar */
    --qm-z-modal-backdrop: 1040;
    --qm-z-modal:         1050;
    --qm-z-tooltip:       1080;
}