/* 連立方程式マスター：小学校アプリと同じ明るいポップ／パステル。
   計算の配置・状態・ドラッグは元のまま使う。 */
html:is([data-math-look="pop"], [data-math-look="pastel"], [data-math-look="elegant"], [data-math-look="simple"]) {
  --work-positive-ink: #195434;
  --work-positive-bg: #ddf5b8;
  --work-positive-border: #478329;
  --work-negative-ink: #912c20;
  --work-negative-bg: #ffe0d2;
  --work-negative-border: #c34b32;
  --work-zero-ink: #125980;
  --work-zero-bg: #a6e6ff;
  --work-zero-border: #176c9a;
  --work-card-radius: 12px;
  --work-card-shadow: 3px 4px 0 #8bb2c9;
  --work-card-hover-shadow: 3px 5px 0 #789eb4;
  --work-button-radius: 7px;
  --work-choice-bg: #fff;
  --work-choice-hover: #caedff;
  --work-choice-border: #456b83;
}
html[data-math-look="pastel"] {
  --work-positive-ink: #195d40;
  --work-positive-bg: #dcf8e9;
  --work-positive-border: #4b9b75;
  --work-negative-ink: #a83056;
  --work-negative-bg: #ffe2ed;
  --work-negative-border: #cc668a;
  --work-zero-bg: #d2f6ff;
  --work-zero-border: #72b2c8;
  --work-card-radius: 20px;
  --work-card-shadow: 0 4px 0 #c4a4d8, inset 0 2px #fff;
  --work-card-hover-shadow: 0 5px 0 #b591cc, inset 0 2px #fff;
  --work-button-radius: 12px;
  --work-choice-bg: linear-gradient(180deg, #fff, #faf2ff);
  --work-choice-hover: #f4ddf5;
  --work-choice-border: #c8a7df;
}

/* 小学校アプリとそろえたポップ・パステルの入力・解説・完了画面。
   開閉、無効状態、スクロール、ドラッグ位置、計算処理は元の指定を使う。 */
html:is([data-math-look="pop"], [data-math-look="simple"]) {
  --tool-frame: #15364f; --tool-radius: 13px; --tool-key-radius: 7px;
  --tool-panel: #bfe5f5; --tool-paper: #f8fdff; --tool-display: #f7ffe7;
  --tool-shadow: 5px 6px 0 #789eb4; --tool-card-shadow: 5px 6px 0 #b2cad4;
  --tool-key: #fff; --tool-key-frame: #15364f; --tool-key-shadow: 2px 3px 0 #15364f;
  --tool-special: #99dbf6; --tool-special-ink: #15364f;
  --tool-action: #ffbb69; --tool-action-ink: #15364f;
  --tool-primary: #c4ed48; --tool-primary-ink: #15364f;
  --tool-hint: #e5f5bc; --tool-hint-ink: #385514;
  --tool-answer: #ffaf43; --tool-answer-ink: #15364f;
  --tool-dialog-border: #15364f; --tool-dialog-shadow: 7px 8px 0 #b2cad4, 0 16px 35px #15364f26;
}
html[data-math-look="pastel"] {
  --tool-frame: #fff; --tool-radius: 27px; --tool-key-radius: 16px;
  --tool-panel: linear-gradient(150deg, #fff2fb, #f5ddff 75%);
  --tool-paper: linear-gradient(145deg, #fff, #fff4fb); --tool-display: #fffcf1;
  --tool-shadow: 0 7px 0 #b68bcb, 0 13px 22px #27154c26; --tool-card-shadow: 0 6px 0 #b399d2;
  --tool-key: linear-gradient(#fff, #fff0f8); --tool-key-frame: #fff; --tool-key-shadow: 0 4px 0 #d5a6d4;
  --tool-special: #c6f0ff; --tool-special-ink: #316781;
  --tool-action: #ffd1e2; --tool-action-ink: #98436b;
  --tool-primary: linear-gradient(#ffe88d, #ffc763); --tool-primary-ink: #6c3c23;
  --tool-hint: #f1e2ff; --tool-hint-ink: #74458d;
  --tool-answer: #ffe68a; --tool-answer-ink: #714717;
  --tool-dialog-border: #fff; --tool-dialog-shadow: 0 8px 0 #b68bcb, 0 18px 35px #75559b26;
}
/* 連立方程式専用の金色テーマ。項の区別、数式、ドラッグ位置は元のまま。 */
html[data-math-look="elegant"] {
  --look-bg: #f5eddc; --look-ink: #25324b; --look-muted: #6d675c;
  --look-surface: #fffdf7; --look-soft: #f7eedb; --look-border: #c9ab67;
  --look-accent: #7b591e; --look-accent-soft: #f2e2b9;
  --look-warm: #7b591e; --look-warm-soft: #fff3d5;
  --look-success: #246445; --look-success-soft: #e5f1e5;
  --look-danger: #b1314b; --look-danger-soft: #fae4e7; --look-shadow: #ddcda9;
  --bg: var(--look-bg); --surface: var(--look-surface); --border: var(--look-border);
  --text: var(--look-ink); --subtle: var(--look-muted); --accent: var(--look-accent);
  /* 文字の項は金、数の項は銀、展開する項は銅。equation-work.cssで対応づける。 */
  --work-positive-ink: #4b3612; --work-positive-border: #a27c35;
  --work-positive-bg: linear-gradient(135deg, #d3af62, #fff1c2 26%, #ead091 49%, #fff5cf 67%, #d1ad60);
  --work-negative-ink: #62301f; --work-negative-border: #a26b4c;
  --work-negative-bg: linear-gradient(135deg, #c78f6c, #ffe1cd 26%, #e3b18e 49%, #ffe9d8 67%, #c58b68);
  --work-zero-ink: #303f54; --work-zero-border: #8793a4;
  --work-zero-bg: linear-gradient(135deg, #b8c2cf, #f6f8fb 26%, #d4dce5 49%, #fff 67%, #b7c2d0);
  --work-card-radius: 16px; --work-card-shadow: 0 3px 0 #bca77e;
  --work-card-hover-shadow: 0 5px 0 #aa9267; --work-button-radius: 10px;
  --work-choice-bg: linear-gradient(#fffdf7, #faf2df); --work-choice-hover: #f4e5bf; --work-choice-border: #c9ab67;
  --tool-frame: #c9ab67; --tool-radius: 20px; --tool-key-radius: 11px;
  --tool-panel: linear-gradient(145deg, #fffefa, #f0e6cf 76%, #fffaf0);
  --tool-paper: #fffdf7; --tool-display: #fffef9;
  --tool-shadow: inset 0 0 0 2px #fffdf3, 0 5px 0 #b7a078, 0 12px 24px #3c352326;
  --tool-card-shadow: 0 4px 0 #ddcda9;
  --tool-key: linear-gradient(#fff, #faf5e8); --tool-key-frame: #bda26e; --tool-key-shadow: 0 3px 0 #bfaa80;
  --tool-special: #25324b; --tool-special-ink: #f7e5b5;
  --tool-action: var(--work-negative-bg); --tool-action-ink: #62301f;
  --tool-primary: linear-gradient(135deg,#b99246 0%,#f9e8b7 27%,#dec17a 53%,#fff2c9 72%,#c5a05b 100%);
  --tool-primary-ink: #493516; --tool-hint: #f7eedb; --tool-hint-ink: #7b591e;
  --tool-answer: var(--tool-primary); --tool-answer-ink: #493516;
  --tool-dialog-border: #c9ab67; --tool-dialog-shadow: 0 10px 35px #25324b40;
}