/* Hallmark · genre: modern-minimal · theme: custom "Instrument" (teal 205°) · design-system: design.md · designed-as-app
 * vibe: 計測器の声 — 冷静な teal × データの橙シグナル
 * paper oklch(99% 0.003 210) · accent oklch(50% 0.11 205) teal · display+body: IBM Plex Sans (Latin同梱) + system JP
 * axes: paper-band=light(dark対) / display-style=grotesk-sans / accent-hue=cool-teal
 *
 * 値は sRGB hex で保持する (設計は OKLCH、各行の注記が正典)。理由: Canvas/SVG 書き出しが
 * getComputedStyle 経由でこの文字列をそのまま運ぶため、oklch() を書くと Illustrator 等の
 * SVG 取込みで色が壊れる。OKLCH→sRGB 変換はピクセル実測 (docs: hallmark redesign 2026-07-22)。
 * 正準トークン名は JS (plot.js/theme.js ほか) が直接読むため不変。値のみ更新可。 */

/* ============ フォント (同梱 IBM Plex Sans — OFL-1.1, ui/fonts/) ============ */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

:root {
  /* ---- サーフェス ---- */
  --bg: #ecf1f2;            /* app-bg            oklch(95.5% 0.006 210) */
  --bg-deep: #e4ebec;       /* workspace-bg      oklch(93.5% 0.008 210) */
  --panel: #f4f8f8;         /* surface-2         oklch(97.5% 0.004 210) */
  --panel-2: #fafcfd;       /* surface-1 (紙)    oklch(99% 0.003 210) — 純白廃止 */
  --panel-border: #d0d9db;  /* border-subtle     oklch(88% 0.010 210) */
  --border-strong: #aabbbe; /*                   oklch(78% 0.02 210) */

  /* ---- テキスト ---- */
  --text: #121f23;          /* text-primary      oklch(23% 0.02 220) */
  --muted: #4f5e62;         /* text-secondary    oklch(47% 0.02 215) */
  --text-disabled: #859294; /*                   oklch(65% 0.015 210) */

  /* ---- アンカー (Instrument teal) ---- */
  --accent: #007481;        /* oklch(50% 0.11 205) — フォーカス/主ボタン/選択指示に限定 */
  --accent-hover: #00626f;  /* oklch(44% 0.11 205) */
  --accent-text: #fafcfd;   /* oklch(99% 0.003 210) */

  /* ---- データシグナル (フィット曲線=橙。アンカーと補色で衝突しない) ---- */
  --fit-color: #cc3526;     /* oklch(56% 0.19 30) */

  /* ---- 状態色 ---- */
  --good: #007e46;          /* oklch(52% 0.13 155) */
  --warn: #a57710;          /* oklch(60% 0.12 80) */
  --bad: #c52b30;           /* oklch(54% 0.19 25) */

  /* ---- 面の状態 ---- */
  --sel-bg: rgba(0, 118, 128, 0.11);   /* accent-soft    oklch(50% 0.11 205 / .11) */
  --surface-hover: #e9f0f1;            /*                oklch(95% 0.008 210) */
  --surface-active: #bce7ec;           /* 選択面         oklch(90% 0.045 205) */

  /* ---- グラフ ---- */
  --grid-color: rgba(70, 85, 93, 0.13);   /* oklch(45% 0.02 215 / .13) */

  /* ---- 結果 (琥珀) — 旧インライン #7a5b13/#fdf6e0/#e3cf94/#fbecb9 の正式トークン化 ---- */
  --result-ink: #6c5005;     /* oklch(45% 0.09 85) */
  --result-bg: #fcf1d4;      /* oklch(96% 0.04 90) */
  --result-border: #e4cb91;  /* oklch(85% 0.08 88) */
  --result-hover: #f4e4b8;   /* oklch(92% 0.06 90) */

  /* ---- クローム ---- */
  --titlebar: #e2e9eb;              /* oklch(93% 0.008 210) */
  --titlebar-active: #fafcfd;       /* oklch(99% 0.003 210) — アクティブ窓は紙色へ持ち上げ (標高で識別) */
  --titlebar-text-active: var(--text);
  --titlebar-accent: var(--accent);
  --shadow: 0 2px 8px rgba(18, 31, 35, 0.10);
  --shadow-overlay: 0 8px 28px rgba(9, 17, 19, 0.20);
  --focus-ring: 0 0 0 2px var(--panel-2), 0 0 0 4px var(--accent);
  --scrim: rgba(9, 17, 19, 0.45);      /* 全画面オーバーレイの霞 (両テーマ共通の暗幕) */
  --on-scrim: #fdfefe;                 /* 暗幕/危険色の上の文字 (テーマ非依存の白) */

  /* ---- スケール ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;

  /* ---- モーション (ブラウザ既定 ease 禁止) ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-short: 140ms;
  --dur-med: 220ms;

  /* ---- レイヤー (名前付き z スケール。boot-splash/nowasm は index.html 内で --z-boot 相当を直書き) ---- */
  --z-float: 10;     /* フライアウト/ドロップダウン */
  --z-sticky: 20;    /* 固定ヘッダ類 */
  --z-overlay: 100;  /* パネルオーバーレイ */
  --z-modal: 200;    /* モーダル */
  --z-toast: 300;    /* トースト/ドロップ表示 */

  /* ---- タイポグラフィ ---- */
  --font-ui: "IBM Plex Sans", system-ui, "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Noto Sans Mono", monospace;
  --ui-font-size: 13px;   /* 設定画面が上書き */
}

/* ============ ダーク ============ */
[data-theme="dark"] {
  --bg: #091113;            /* oklch(17% 0.012 215) */
  --bg-deep: #060b0d;       /* oklch(14.5% 0.010 215) */
  --panel: #111a1c;         /* oklch(21% 0.014 215) */
  --panel-2: #0c1315;       /* oklch(18% 0.012 215) — plot.js のプロット面 */
  --panel-border: #223134;  /* oklch(30% 0.02 215) */
  --border-strong: #33464a; /* oklch(38% 0.025 212) */

  --text: #e2e9eb;          /* oklch(93% 0.008 210) */
  --muted: #8e9b9d;         /* oklch(68% 0.015 210) */
  --text-disabled: #5a6668; /* oklch(50% 0.015 210) */

  --accent: #48b7bd;        /* oklch(72% 0.10 200) */
  --accent-hover: #5dcbd1;  /* oklch(78% 0.10 200) */
  --accent-text: #001114;   /* oklch(16% 0.03 210) — 明アクセント上の文字 */

  --fit-color: #f07456;     /* oklch(70% 0.16 35) */

  --good: #59b47d;          /* oklch(70% 0.12 155) */
  --warn: #cea856;          /* oklch(75% 0.11 85) */
  --bad: #ea6b64;           /* oklch(68% 0.16 25) */

  --sel-bg: rgba(75, 180, 187, 0.16);   /* oklch(72% 0.10 200 / .16) */
  --surface-hover: #1b2629;             /* oklch(26% 0.016 215) */
  --surface-active: #093a3f;            /* oklch(32% 0.05 205) */

  --grid-color: rgba(163, 177, 184, 0.14);  /* oklch(75% 0.02 210 / .14) */

  --result-ink: #d9ba70;     /* oklch(80% 0.10 88) */
  --result-bg: #322710;      /* oklch(28% 0.04 85) */
  --result-border: #5f4a1a;  /* oklch(42% 0.07 85) */
  --result-hover: #413315;   /* oklch(33% 0.05 85) */

  --titlebar: #111a1c;
  --titlebar-active: #162124;   /* oklch(24% 0.014 215) — アクティブ窓をわずかに持ち上げ */
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.42);
  --shadow-overlay: 0 10px 32px rgba(0, 0, 0, 0.5);
}