/* ═══════ Theme Definitions ═══════
   Each theme overrides CSS variable values.
   Switch with: document.documentElement.setAttribute('data-theme', 'xxx')
*/

/* ── Light (default) ── */
:root, [data-theme="light"] {
  --bg: #f0f2f5; --panel: #ffffff; --card: #f7f8fa;
  --primary: #4a7cff; --primary-hover: #3565d9;
  --danger: #e0556a; --success: #2ea362; --warning: #e89230;
  --text: #1a1a2e; --text-dim: #8888a0; --border: #dde0e5;
  --radius: 10px; --radius-sm: 6px;
  --shadow: 0 2px 16px rgba(0,0,0,0.08);
  --toolbar-bg: #ffffff; --main-grad: radial-gradient(ellipse at center, #eef1f6 0%, var(--bg) 70%);
  --btn-bg: #eef0f5; --btn-hover: #dde1ea; --btn-text: #444;
  --overlay-bg: rgba(0,0,0,0.35); --board-bg: #f7f8fa;
  --palette-bg: rgba(255,255,255,0.94); --input-bg: #ffffff;
  --upload-hover-bg: #f0f4ff;
}

/* ── Dark ── */
[data-theme="dark"] {
  --bg: #12121f; --panel: #1c1c33; --card: #282850;
  --primary: #6b8cff; --primary-hover: #5a78e8;
  --danger: #f05b6c; --success: #4eca7b; --warning: #f0a050;
  --text: #e8e8f0; --text-dim: #9090b0; --border: #3a3a60;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --toolbar-bg: #16162a; --main-grad: radial-gradient(ellipse at center, #1a1a35 0%, var(--bg) 70%);
  --btn-bg: #2a2a50; --btn-hover: #3a3a68; --btn-text: #ccc;
  --overlay-bg: rgba(0,0,0,0.65); --board-bg: #16162a;
  --palette-bg: rgba(22,22,42,0.9); --input-bg: #1a1a35;
  --upload-hover-bg: #1e1e42;
}

/* ── Ink Wash (水墨) ── */
[data-theme="ink"] {
  --bg: #f5f0e8; --panel: #ede4d6; --card: #e8ddd0;
  --primary: #8b5e3c; --primary-hover: #6d3a1a;
  --danger: #c0392b; --success: #6a8a4e; --warning: #d4913e;
  --text: #3a2a1a; --text-dim: #9a8a7a; --border: #d4c8b0;
  --shadow: 0 4px 16px rgba(60,30,10,0.15);
  --toolbar-bg: #ede4d6; --main-grad: radial-gradient(ellipse at center, #f5ede0 0%, var(--bg) 70%);
  --btn-bg: #e0d4c0; --btn-hover: #cdbfa8; --btn-text: #3a2a1a;
  --overlay-bg: rgba(40,20,10,0.5); --board-bg: #ede4d6;
  --palette-bg: rgba(237,228,214,0.94); --input-bg: #fffdf7;
  --upload-hover-bg: #fdf5e8;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4 0.12' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* ── 青花 Blue Porcelain ── */
[data-theme="porcelain"] {
  --bg: #f2f0e8; --panel: #e8e5d8; --card: #dfdbc8;
  --primary: #3a5a8c; --primary-hover: #4a6a9c;
  --danger: #c44a3a; --success: #5a8a5a; --warning: #c4883a;
  --text: #2a2820; --text-dim: #8a8878; --border: #c8c4b0;
  --shadow: 0 4px 16px rgba(40,30,10,0.12);
  --toolbar-bg: #e8e5d8; --main-grad: radial-gradient(ellipse at center, #f5f2e8 0%, var(--bg) 70%);
  --btn-bg: #ddd8c4; --btn-hover: #cfc9b0; --btn-text: #3a2a1a;
  --overlay-bg: rgba(30,25,15,0.45); --board-bg: #e8e5d8;
  --palette-bg: rgba(232,229,216,0.94); --input-bg: #faf8f0;
  --upload-hover-bg: #f0ecdd;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.25 0.25' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ── 朱砂 Cinnabar ── */
[data-theme="cinnabar"] {
  --bg: #faf5ed; --panel: #f2e8d8; --card: #ece0ca;
  --primary: #b8433a; --primary-hover: #c8534a;
  --danger: #d04030; --success: #6a8a4e; --warning: #d4913e;
  --text: #3a2018; --text-dim: #9a8070; --border: #d8ccb8;
  --shadow: 0 4px 16px rgba(80,30,15,0.15);
  --toolbar-bg: #f2e8d8; --main-grad: radial-gradient(ellipse at center, #fdf8f0 0%, var(--bg) 70%);
  --btn-bg: #e8d8c0; --btn-hover: #dcc8a8; --btn-text: #3a2018;
  --overlay-bg: rgba(50,20,10,0.5); --board-bg: #f2e8d8;
  --palette-bg: rgba(242,232,216,0.94); --input-bg: #fffdf8;
  --upload-hover-bg: #f5ede0;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65 0.25' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}

/* ── 青绿 Celadon ── */
[data-theme="celadon"] {
  --bg: #edf2eb; --panel: #e0e8dc; --card: #d4ded0;
  --primary: #5a8a6a; --primary-hover: #6a9a7a;
  --danger: #c05040; --success: #5a8a6a; --warning: #c89838;
  --text: #2a3028; --text-dim: #8a9880; --border: #c4d0b8;
  --shadow: 0 4px 16px rgba(40,60,30,0.12);
  --toolbar-bg: #e0e8dc; --main-grad: radial-gradient(ellipse at center, #f0f5ee 0%, var(--bg) 70%);
  --btn-bg: #d4dcc8; --btn-hover: #c4d0b8; --btn-text: #2a3028;
  --overlay-bg: rgba(25,40,20,0.45); --board-bg: #e0e8dc;
  --palette-bg: rgba(224,232,220,0.94); --input-bg: #f5faf3;
  --upload-hover-bg: #e8f0e4;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.03' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* ── 墨竹 Bamboo Ink ── */
[data-theme="bamboo"] {
  --bg: #eae8e0; --panel: #e0ded4; --card: #d6d4ca;
  --primary: #3a4038; --primary-hover: #4a5048;
  --danger: #b04030; --success: #5a8060; --warning: #a08038;
  --text: #2a2a24; --text-dim: #8a8880; --border: #c4c2b8;
  --shadow: 0 4px 16px rgba(30,30,20,0.12);
  --toolbar-bg: #e0ded4; --main-grad: radial-gradient(ellipse at center, #edebe4 0%, var(--bg) 70%);
  --btn-bg: #d4d2c4; --btn-hover: #c4c2b4; --btn-text: #2a2a24;
  --overlay-bg: rgba(25,25,15,0.45); --board-bg: #e0ded4;
  --palette-bg: rgba(224,222,212,0.94); --input-bg: #f5f3ec;
  --upload-hover-bg: #e8e6dc;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.15 0.7' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* ── 烟雨 Misty Rain ── */
[data-theme="mist"] {
  --bg: #eaecf0; --panel: #dee2e8; --card: #d4d8de;
  --primary: #5a6a8a; --primary-hover: #6a7a9a;
  --danger: #b8483a; --success: #5a886a; --warning: #b8983a;
  --text: #2a2e34; --text-dim: #8a8e94; --border: #c0c4cc;
  --shadow: 0 4px 16px rgba(30,35,50,0.12);
  --toolbar-bg: #dee2e8; --main-grad: radial-gradient(ellipse at center, #edf0f4 0%, var(--bg) 70%);
  --btn-bg: #d0d4da; --btn-hover: #c0c4ca; --btn-text: #2a2e34;
  --overlay-bg: rgba(20,25,40,0.45); --board-bg: #dee2e8;
  --palette-bg: rgba(222,226,232,0.94); --input-bg: #f4f6fa;
  --upload-hover-bg: #e4e8ee;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08 0.08' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* ── 紫砂 Yixing Clay ── */
[data-theme="yixing"] {
  --bg: #f0e8e4; --panel: #e8ddd6; --card: #e0d4cc;
  --primary: #7a5a4a; --primary-hover: #8a6a5a;
  --danger: #b84838; --success: #6a8a5a; --warning: #c49848;
  --text: #3a2a24; --text-dim: #9a887a; --border: #d0c4b8;
  --shadow: 0 4px 16px rgba(60,30,20,0.14);
  --toolbar-bg: #e8ddd6; --main-grad: radial-gradient(ellipse at center, #f3ece6 0%, var(--bg) 70%);
  --btn-bg: #dcd0c4; --btn-hover: #ccc0b0; --btn-text: #3a2a24;
  --overlay-bg: rgba(40,20,15,0.5); --board-bg: #e8ddd6;
  --palette-bg: rgba(232,221,214,0.94); --input-bg: #faf5f0;
  --upload-hover-bg: #ede4dc;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}