/* ============================================================
   variables.css - Beryl デザイントークン（アプリ本体用）
   ----------------------------------------------------------
   対象範囲: ルート直下のHTML（HP/, lp/ は対象外）
   現状ルート直下39ファイルの :root 定義を調査し、41種類の
   カスタムプロパティを意味ベースの新名称（--color-xxx 等）に
   整理したもの。下半分は既存コードの var(--primary) 等を壊さ
   ないための後方互換エイリアス。

   値が複数ページで割れていた変数は、最も多く使われていた値を
   代表値として採用している（少数派の値はページ固有の上書きと
   して各HTMLの :root に残る想定。今回このファイルでは変更しない）。

   このファイルはまだどのHTMLからも読み込まれていない（適用は別作業）。
   ============================================================ */

:root {
    /* ---- Color: Brand / Accent ----
       --primary 系はページ（モジュール）ごとに意図的に異なる
       アクセントカラーが設定されている（例: 在庫管理は緑、
       カレンダーは紫、など）。ここではデフォルト/最頻値を置く。 */
    --color-primary: #00ced1;
    --color-primary-glow: rgba(0, 206, 209, 0.4);
    --color-primary-deep: #8b7ba8;
    --color-main: #00ced1;
    --color-accent: #ff8c00;

    /* ---- Color: Surface / Background ---- */
    --color-bg-base: #0f0f13;
    --color-surface: #1e1e23;
    --color-surface-translucent: rgba(30, 30, 35, 0.9);
    --color-card: #2d2d2d;
    --color-panel: #1a1a1a;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-ghost-wall: rgba(255, 255, 255, 0.05);

    /* ---- Color: Text ---- */
    --color-text-main: #ffffff;
    --color-text: #eee;
    --color-text-sub: #a0a0a5;
    --color-text-muted: #888;
    --color-text-secondary: #aaa;

    /* ---- Color: Status / Semantic ---- */
    --color-danger: #f97316;
    --color-warning: #ffb300;
    --color-status-pink: #ff69b4;
    --color-status-orange: #ffa07a;
    --color-status-yellow: #ffd700;
    --color-status-open: #4caf50;
    --color-status-closed: #ff9800;
    --color-line-brand: #06c755;

    /* ---- Color: LIFF (LINEミニアプリ) テーマ ---- */
    --color-liff-base: #1a1a1a;
    --color-liff-tab-bar-bg: #f0f0f0;
    --color-liff-tab-border: #c8c8c8;
    --color-liff-tab-active-bg: #ffffff;
    --color-liff-tab-active-fg: #1a1a1a;
    --color-liff-tab-active-ring: #1a1a1a;
    --color-liff-tab-inactive-bg: #e4e4e4;
    --color-liff-tab-inactive-fg: #1a1a1a;

    /* ---- Typography ----
       アプリ全体のベースフォントは anexis-font.css が "Zen Maru
       Gothic" を !important で強制適用している（このファイルは
       未変更・全ページ共通）。--font-family-app はここでは "Noto
       Sans JP" を採用しているが、anexis-font.css の !important に
       競り負けるため、実際にこの値が表示に反映されるのは index.html
       がローカルで !important 上書きを行っているページのみ
       （2026-06時点ではindex.htmlのみ）。
       --font-size-* は今回未対応（既存コードに該当変数がないため
       見送り。別タスクで検討）。 */
    --font-family-app: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
    --font-family-liff: 'Outfit', sans-serif;

    /* ---- Layout / Sizing ---- */
    --spacing-safe-bottom: env(safe-area-inset-bottom, 0px);
    --size-ppm: 2.5px;

    /* ============================================================
       後方互換エイリアス
       ----------------------------------------------------------
       既存HTMLの var(--primary) 等の参照をそのまま動かすための
       旧変数名。新規コードは上の --color-xxx / --font-family-xxx /
       --spacing-xxx を直接使うこと。
       ============================================================ */
    --primary: var(--color-primary);
    --primary-glow: var(--color-primary-glow);
    --primary-deep: var(--color-primary-deep);
    --main: var(--color-main);
    --accent: var(--color-accent);

    --bg: var(--color-bg-base);
    --bg-color: var(--color-bg-base);
    --surface: var(--color-surface);
    --surface-color: var(--color-surface-translucent);
    --card: var(--color-card);
    --panel: var(--color-panel);
    --border: var(--color-border);
    --ghost-wall: var(--color-ghost-wall);

    --text-main: var(--color-text-main);
    --text: var(--color-text);
    --text-sub: var(--color-text-sub);
    --text-muted: var(--color-text-muted);
    --sub: var(--color-text-secondary);

    --danger: var(--color-danger);
    --warning: var(--color-warning);
    --warning-pink: var(--color-status-pink);
    --settled: var(--color-status-pink);
    --holiday-pink: var(--color-status-pink);
    --warning-orange: var(--color-status-orange);
    --overtime: var(--color-status-orange);
    --off-yellow: var(--color-status-yellow);
    --bg-open: var(--color-status-open);
    --bg-closed: var(--color-status-closed);
    --line: var(--color-line-brand);

    --liff-color: var(--color-liff-base);
    --liff-tab-bar-bg: var(--color-liff-tab-bar-bg);
    --liff-tab-border: var(--color-liff-tab-border);
    --liff-tab-active-bg: var(--color-liff-tab-active-bg);
    --liff-tab-active-fg: var(--color-liff-tab-active-fg);
    --liff-tab-active-ring: var(--color-liff-tab-active-ring);
    --liff-tab-inactive-bg: var(--color-liff-tab-inactive-bg);
    --liff-tab-inactive-fg: var(--color-liff-tab-inactive-fg);

    --font-app: var(--font-family-app);
    --liff-font: var(--font-family-liff);

    --safe-bottom: var(--spacing-safe-bottom);
    --ppm: var(--size-ppm);
}

[data-theme="light"] {
    --color-bg-base: #f5f5f7;
    --color-surface: #f0f0f5;
    --color-card: #ffffff;
    --color-panel: #e8e8ed;
    --color-text-main: #1d1d1f;
    --color-text-sub: #6e6e73;
    --color-border: rgba(0, 0, 0, 0.08);
}