/* =========================================================
   LMSスマート デザイントークン（「静かなワークスペース」）
   色・余白・文字・角丸・影・動き。ライト／ダーク両対応。
   ページ側で色を直書きせず、必ずこの変数を使う。
   ========================================================= */
:root {
  color-scheme: light;
  /* 面と線 */
  --bg: #F7F7F5;          /* 紙色：ページ背景 */
  --surface: #FFFFFF;     /* カード・表・入力 */
  --surface-2: #FBFBFA;   /* 表ヘッダー・サブ面 */
  --surface-3: #F1F0EC;   /* 押下・選択・スケルトン */
  --line: #E6E4DF;        /* 罫線（1px） */
  --line-strong: #D4D1CA; /* 入力枠 */
  /* 文字 */
  --ink: #1A1A1A;
  --ink-2: #5A5A57;
  --ink-3: #8C8B86;
  --ink-inverse: #FFFFFF;
  /* 意味色 */
  --accent: #0F766E;
  --accent-hover: #0B5F58;
  --accent-soft: #E6F4F1;
  --accent-ink: #0B5F58;  /* accent-soft 上の文字 */
  --warn: #B45309;  --warn-soft: #FDF3E4;
  --danger: #B91C1C; --danger-hover: #991515; --danger-soft: #FBEAEA;
  --ok: #15803D;    --ok-soft: #E8F5EC;
  --info: #1D4ED8;  --info-soft: #EAF0FD;
  --neutral-soft: #F0EFEB;
  /* グラフ系列（Chart.js 用。ui.chartColors() で取得） */
  --chart-1: #0F766E; --chart-2: #1D4ED8; --chart-3: #B45309; --chart-4: #7C3AED; --chart-5: #BE185D; --chart-6: #4D7C0F;
  --chart-grid: #ECEAE5;
  /* 影（最小限：浮く要素のみ） */
  --shadow-pop: 0 1px 2px rgba(20, 20, 18, .06), 0 8px 24px rgba(20, 20, 18, .08);
  --shadow-drawer: -12px 0 32px rgba(20, 20, 18, .10);
  --overlay: rgba(26, 26, 24, .32);
  --focus: 0 0 0 2px var(--accent);

  /* 文字 */
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  --font-num: "Manrope", "Noto Sans JP", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-h3: 20px;
  --fs-h2: 24px;
  --fs-h1: 28px;
  --fs-kpi: 30px;
  --lh: 1.6;
  --lh-tight: 1.3;

  /* 余白（4px 基準） */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --gutter: 32px;

  /* 角丸（小さめ） */
  --r-1: 4px;   /* バッジ・チェック */
  --r-2: 6px;   /* ボタン・入力 */
  --r-3: 8px;   /* カード・ポップ */
  --r-4: 12px;  /* モーダル */

  /* 寸法 */
  --globalbar-h: 52px;
  --grouptabs-h: 44px;
  --subnav-w: 216px;
  --content-max: 1280px;
  --user-max: 1120px;
  --control-h: 36px;
  --control-h-sm: 30px;

  /* 動き */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
  --dur-slow: 260ms;
  --z-bar: 40; --z-drawer: 70; --z-modal: 80; --z-toast: 90; --z-pop: 60;
}

@media (max-width: 768px) {
  :root { --gutter: 16px; --fs-kpi: 26px; --fs-h1: 24px; --fs-h2: 21px; }
}

/* ── ダーク（OS設定＝自動） ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121311; --surface: #1B1C19; --surface-2: #20211E; --surface-3: #2A2B27; --line: #2A2B27; --line-strong: #3A3B36;
    --ink: #ECEBE6; --ink-2: #B5B3AB; --ink-3: #7E7D76; --ink-inverse: #0F100E;
    --accent: #2DD4BF; --accent-hover: #5EEAD4; --accent-soft: #163A36; --accent-ink: #7FE7D8;
    --warn: #F59E0B; --warn-soft: #3A2B12; --danger: #F87171; --danger-hover: #FCA5A5; --danger-soft: #3B1B1B;
    --ok: #4ADE80; --ok-soft: #173322; --info: #93B4FD; --info-soft: #1B2642; --neutral-soft: #262723;
    --chart-1: #2DD4BF; --chart-2: #93B4FD; --chart-3: #F59E0B; --chart-4: #C4B5FD; --chart-5: #F9A8D4; --chart-6: #A3E635; --chart-grid: #2A2B27;
    --shadow-pop: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px rgba(0, 0, 0, .45);
    --shadow-drawer: -12px 0 32px rgba(0, 0, 0, .5);
    --overlay: rgba(0, 0, 0, .55);
  }
}
/* ── ダーク（手動切替） ── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121311; --surface: #1B1C19; --surface-2: #20211E; --surface-3: #2A2B27; --line: #2A2B27; --line-strong: #3A3B36;
  --ink: #ECEBE6; --ink-2: #B5B3AB; --ink-3: #7E7D76; --ink-inverse: #0F100E;
  --accent: #2DD4BF; --accent-hover: #5EEAD4; --accent-soft: #163A36; --accent-ink: #7FE7D8;
  --warn: #F59E0B; --warn-soft: #3A2B12; --danger: #F87171; --danger-hover: #FCA5A5; --danger-soft: #3B1B1B;
  --ok: #4ADE80; --ok-soft: #173322; --info: #93B4FD; --info-soft: #1B2642; --neutral-soft: #262723;
  --chart-1: #2DD4BF; --chart-2: #93B4FD; --chart-3: #F59E0B; --chart-4: #C4B5FD; --chart-5: #F9A8D4; --chart-6: #A3E635; --chart-grid: #2A2B27;
  --shadow-pop: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px rgba(0, 0, 0, .45);
  --shadow-drawer: -12px 0 32px rgba(0, 0, 0, .5);
  --overlay: rgba(0, 0, 0, .55);
}