/* ==========================================
   Design Tokens (社内UI共通)
   - 配色は Shopify の管理画面に近い配色感 (2026-09-30 に白黒基調から変更。docs/UX_FLOW.md 4-8)
     - サイドメニュー・上部のバー = 同系の黒っぽい色 (--chrome-*)。アイコンは色なし
     - メインの画面 = 薄いグレーの背景 (--bg) に白いカード (--surface)
     - 状態のバッジ = 緑・黄・赤・青・グレー。メインの画面のアイコンは業務の領域ごとの色 (--area-*) を持てる
   - 色はこのファイルの変数だけで管理する (画面ごとに色を直書きしない)
   - 文字サイズ・余白は rem。ブラウザの文字サイズ設定と、
     個人の表示設定 (/settings/display) の倍率 --ui-font-scale に追従する
   ========================================== */
:root {
    /* 個人設定で上書きされる値 (static/js/ui_prefs.js が <html> に data 属性で反映) */
    --ui-font-scale: 1;
    --ui-line-height: 1.5;

    /* Surface: グレーの背景に白いカードを載せる */
    --bg: #f1f1f1;
    --surface: #ffffff;
    --surface-sunken: #f7f7f7;
    --surface-hover: #f1f1f1;
    --border: #e3e3e3;
    --border-strong: #c9c9c9;

    /* Chrome: サイドメニュー・上部のバー (同系の黒っぽい色) */
    --chrome-bg: #1a1a1a;
    --chrome-bg-hover: #2a2a2a;
    --chrome-bg-active: #383838;
    --chrome-border: #2f2f2f;
    --chrome-text: #e3e3e3;
    --chrome-text-muted: #a3a3a3;
    --chrome-icon: #b5b5b5;
    --chrome-input-bg: #2e2e2e;
    /* サイドメニューは上部のバーより1段明るくし、領域の違いが分かるようにする */
    --chrome-sidebar-bg: #2b2b2b;
    --chrome-sidebar-hover: #3a3a3a;
    --chrome-sidebar-active: #474747;

    /* Text (白背景でのコントラスト比: text 17.9 / secondary 7.5 / tertiary 4.6) */
    --text: #1a1a1a;
    --text-secondary: #555555;
    --text-tertiary: #737373;

    /* Accent = 主な操作 (Shopify と同じく黒に近い濃いグレー) */
    --accent: #1f1f1f;
    --accent-hover: #3a3a3a;
    --accent-soft: #f1f1f1;
    --accent-ring: rgba(0, 91, 211, 0.28);

    /* Link・フォーカス = 青 */
    --link: #005bd3;
    --link-hover: #004299;

    /* Semantic (文字色 / 淡い背景) */
    --danger: #b3261e;
    --danger-soft: #fee9e8;
    --warning: #7a4f01;
    --warning-soft: #fff1c2;
    --success: #0c6b3e;
    --success-soft: #dcf5e7;
    --info: #00529b;
    --info-soft: #e5f0ff;

    /* Work status (チップ・バッジ用: 文字色 / 背景色)。色だけに頼らず必ずラベルと併用する */
    --status-todo: #4a4a4a;      --status-todo-bg: #ebebeb;
    --status-active: #00529b;    --status-active-bg: #e5f0ff;
    --status-waiting: #7a4f01;   --status-waiting-bg: #fff1c2;
    --status-done: #0c6b3e;      --status-done-bg: #dcf5e7;
    --status-danger: #b3261e;    --status-danger-bg: #fee9e8;

    /* 業務の領域の色 (メインの画面のアイコン用: 色 / 淡い背景)。サイドメニューでは使わない */
    --area-order: #2563eb;       --area-order-bg: #e6eeff;
    --area-season: #7c3aed;      --area-season-bg: #f0e8ff;
    --area-product: #7c3aed;     --area-product-bg: #f0e8ff;
    --area-production: #d9580d;  --area-production-bg: #ffeddf;
    --area-inventory: #15803d;   --area-inventory-bg: #e1f5e7;
    --area-finance: #0f766e;     --area-finance-bg: #dcf3f0;
    --area-customer: #c0266d;    --area-customer-bg: #fde7f1;
    --area-system: #525252;      --area-system-bg: #ececec;

    /* プランの色 (設定 ＞ プラン。ROADMAP 3章の23): 色 / 淡い背景 */
    --plan-lite: #0f766e;        --plan-lite-bg: #dcf3f0;
    --plan-standard: #2563eb;    --plan-standard-bg: #e6eeff;
    --plan-full: #7c3aed;        --plan-full-bg: #f0e8ff;

    /* Typography (1rem = 標準で14px) */
    --font-sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
    --fs-xs: 0.8rem;      /* 11px */
    --fs-sm: 0.875rem;    /* 12px */
    --fs-base: 0.93rem;   /* 13px */
    --fs-md: 1rem;        /* 14px */
    --fs-lg: 1.15rem;     /* 16px */
    --fs-xl: 1.43rem;     /* 20px */
    --fs-2xl: 1.7rem;     /* 24px */

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-pill: 999px;

    /* Shadow */
    --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-drawer: -4px 0 24px rgba(0, 0, 0, 0.12);
}

/* ルート文字サイズ: ブラウザ設定(既定16px)の87.5% × 個人設定の倍率 */
html { font-size: calc(87.5% * var(--ui-font-scale)); }
body { line-height: var(--ui-line-height); }

/* ---------- 個人の表示設定 ---------- */
html[data-font-scale="sm"] { --ui-font-scale: 0.9; }
html[data-font-scale="lg"] { --ui-font-scale: 1.15; }
html[data-font-scale="xl"] { --ui-font-scale: 1.3; }

html[data-line-height="relaxed"] { --ui-line-height: 1.8; }

/* 高コントラスト: 補助テキスト・罫線を濃くする */
html[data-contrast="high"] {
    --text-secondary: #222222;
    --text-tertiary: #444444;
    --border: #8c8c8c;
    --border-strong: #555555;
    --surface-sunken: #f5f5f5;
    --status-todo: #222222;
    --accent-ring: rgba(0, 66, 153, 0.55);
    --chrome-text-muted: #cfcfcf;
    --chrome-icon: #d4d4d4;
    --chrome-border: #555555;
}

/* 動きを減らす */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}