/* ============================================================
   HangulMate 화면 테마 팔레트 — spec-pen의 테마 시스템을 이식했다.

   축은 둘: 테마(팔레트)와 밝기(시스템/밝게/어둡게). theme.js가 루트에
   [data-theme]·[data-appearance]를 찍고, 여기의 팔레트가 토큰을 갈아
   끼운다. 한 팔레트가 정하는 seed는 아래 9개뿐이고 나머지는 파생이다.

     --paper --card --ink --muted --line --green --danger --lime --lime-ink

   .hm-pal-* 클래스는 설정 화면의 팔레트 미리보기가 쓴다 — 색을 JS에
   복사하지 않고 그 요소 안에서만 팔레트를 갈아 끼우기 위해서다.

   팔레트 값 출처: spec-pen(frontend/src/themes.css)에서 역할 매핑
   (paper←chrome, card←surface, green←accent, danger←block, lime←ok).
   원 출처는 각 테마의 공개 팔레트(모두 MIT).
   ============================================================ */

/* ── 기본 팔레트(한글메이트 — 흰·회·검 단색) — 부트 스크립트가 찍기 전 첫 페인트 ── */

:root {
  --paper: #f4f4f5;
  --card: #ffffff;
  --ink: #111114;
  --muted: #6b6b72;
  --line: #e3e3e7;
  --green: #18181b;
  --danger: #b42318;
  --lime: #3f3f46;
  --lime-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #0b0b0c;
    --card: #18181b;
    --ink: #f4f4f5;
    --muted: #8f8f98;
    --line: #2b2b30;
    --green: #f4f4f5;
    --danger: #f87171;
    --lime: #d4d4d8;
    --lime-ink: #111114;
  }
}

:root[data-theme="hangulmate-light"], .hm-pal-hangulmate-light {
  --paper: #f4f4f5;
  --card: #ffffff;
  --ink: #111114;
  --muted: #6b6b72;
  --line: #e3e3e7;
  --green: #18181b;
  --danger: #b42318;
  --lime: #3f3f46;
  --lime-ink: #ffffff;
}
:root[data-theme="hangulmate-dark"], .hm-pal-hangulmate-dark {
  --paper: #0b0b0c;
  --card: #18181b;
  --ink: #f4f4f5;
  --muted: #8f8f98;
  --line: #2b2b30;
  --green: #f4f4f5;
  --danger: #f87171;
  --lime: #d4d4d8;
  --lime-ink: #111114;
}

/* ── 따뜻한 포인트 컬러 팔레트 ── */
:root[data-theme="forest-light"], .hm-pal-forest-light {
  --paper: #f5f3ed;
  --card: #ffffff;
  --ink: #17231d;
  --muted: #66736c;
  --line: #dfe3dc;
  --green: #175c43;
  --danger: #a83e32;
  --lime: #cbe66b;
  --lime-ink: #25351d;
}
:root[data-theme="forest-dark"], .hm-pal-forest-dark {
  --paper: #101412;
  --card: #1b211d;
  --ink: #e4e8e2;
  --muted: #8b958d;
  --line: #2c342e;
  --green: #6fbf95;
  --danger: #e08a80;
  --lime: #a8c94f;
  --lime-ink: #1d2617;
}
:root[data-theme="blush-light"], .hm-pal-blush-light {
  --paper: #fbf2f5;
  --card: #fffafc;
  --ink: #3d2633;
  --muted: #9b7f8c;
  --line: #f0dce4;
  --green: #d6336c;
  --danger: #c2410c;
  --lime: #237a36;
  --lime-ink: #ffffff;
}
:root[data-theme="blush-dark"], .hm-pal-blush-dark {
  --paper: #1e151a;
  --card: #2a1e25;
  --ink: #f7e9ef;
  --muted: #ab8f9b;
  --line: #3d2d36;
  --green: #f783ac;
  --danger: #ff8787;
  --lime: #69db7c;
  --lime-ink: #2a1e25;
}
:root[data-theme="blackpink-light"], .hm-pal-blackpink-light {
  --paper: #f7f2f4;
  --card: #ffffff;
  --ink: #0f0f10;
  --muted: #6f6470;
  --line: #e9dfe4;
  --green: #d6166b;
  --danger: #c92a2a;
  --lime: #1f1f22;
  --lime-ink: #ff9ec7;
}
:root[data-theme="blackpink-dark"], .hm-pal-blackpink-dark {
  --paper: #070708;
  --card: #141416;
  --ink: #f8f4f6;
  --muted: #8a8390;
  --line: #2a2529;
  --green: #ff2d95;
  --danger: #ff6b6b;
  --lime: #ffb3d1;
  --lime-ink: #1a0a12;
}
:root[data-theme="sunset-light"], .hm-pal-sunset-light {
  --paper: #fbf3ea;
  --card: #fffaf4;
  --ink: #3b2a1e;
  --muted: #9a7f6b;
  --line: #efdfcf;
  --green: #c2410c;
  --danger: #c92a2a;
  --lime: #237a36;
  --lime-ink: #ffffff;
}
:root[data-theme="sunset-dark"], .hm-pal-sunset-dark {
  --paper: #1c1512;
  --card: #27201b;
  --ink: #f3e9e0;
  --muted: #a8958a;
  --line: #3a302a;
  --green: #ff922b;
  --danger: #ff6b6b;
  --lime: #8ce99a;
  --lime-ink: #27201b;
}
:root[data-theme="cherry-light"], .hm-pal-cherry-light {
  --paper: #f8f1f1;
  --card: #fffafa;
  --ink: #2b1a1a;
  --muted: #937878;
  --line: #ecdcdc;
  --green: #b91c1c;
  --danger: #b45309;
  --lime: #15803d;
  --lime-ink: #ffffff;
}
:root[data-theme="cherry-dark"], .hm-pal-cherry-dark {
  --paper: #1a1212;
  --card: #261b1b;
  --ink: #f6e9e9;
  --muted: #a88f8f;
  --line: #3b2a2a;
  --green: #f87171;
  --danger: #fbbf24;
  --lime: #4ade80;
  --lime-ink: #261b1b;
}
:root[data-theme="amber-light"], .hm-pal-amber-light {
  --paper: #faf6ea;
  --card: #fffdf6;
  --ink: #2f2a1c;
  --muted: #8c8266;
  --line: #ebe3c8;
  --green: #a16207;
  --danger: #b91c1c;
  --lime: #3f6212;
  --lime-ink: #ffffff;
}
:root[data-theme="amber-dark"], .hm-pal-amber-dark {
  --paper: #191610;
  --card: #24201a;
  --ink: #f3eddc;
  --muted: #a79f85;
  --line: #3a3428;
  --green: #f5c451;
  --danger: #fb7185;
  --lime: #bef264;
  --lime-ink: #24201a;
}
:root[data-theme="mocha-light"], .hm-pal-mocha-light {
  --paper: #f3ede6;
  --card: #fffcf8;
  --ink: #2e241c;
  --muted: #8a7a6c;
  --line: #e3d9cf;
  --green: #8b5e34;
  --danger: #b42318;
  --lime: #4f7f3a;
  --lime-ink: #ffffff;
}
:root[data-theme="mocha-dark"], .hm-pal-mocha-dark {
  --paper: #171310;
  --card: #221c18;
  --ink: #eee4d8;
  --muted: #a39283;
  --line: #372d26;
  --green: #d9a066;
  --danger: #f08a7c;
  --lime: #a3c97a;
  --lime-ink: #221c18;
}
:root[data-theme="lavender-light"], .hm-pal-lavender-light {
  --paper: #f4f0f8;
  --card: #fdfbff;
  --ink: #2f2538;
  --muted: #8d8199;
  --line: #e5dded;
  --green: #9c36b5;
  --danger: #c2410c;
  --lime: #237a36;
  --lime-ink: #ffffff;
}
:root[data-theme="lavender-dark"], .hm-pal-lavender-dark {
  --paper: #16121b;
  --card: #211a28;
  --ink: #efe8f6;
  --muted: #a394b0;
  --line: #352b3f;
  --green: #da77f2;
  --danger: #ff8787;
  --lime: #8ce99a;
  --lime-ink: #211a28;
}

:root[data-theme="github-light"], .hm-pal-github-light {
  --paper: #f0f3f6;
  --card: #ffffff;
  --ink: #1f2328;
  --muted: #59636e;
  --line: #d1d9e0;
  --green: #0969da;
  --danger: #cf222e;
  --lime: #1a7f37;
  --lime-ink: #ffffff;
}
:root[data-theme="github-dark"], .hm-pal-github-dark {
  --paper: #0d1117;
  --card: #161b22;
  --ink: #e6edf3;
  --muted: #8b949e;
  --line: #30363d;
  --green: #4493f8;
  --danger: #f85149;
  --lime: #3fb950;
  --lime-ink: #161b22;
}
:root[data-theme="solarized-light"], .hm-pal-solarized-light {
  --paper: #eee8d5;
  --card: #fdf6e3;
  --ink: #073642;
  --muted: #93a1a1;
  --line: #ded8c4;
  --green: #268bd2;
  --danger: #dc322f;
  --lime: #859900;
  --lime-ink: #ffffff;
}
:root[data-theme="solarized-dark"], .hm-pal-solarized-dark {
  --paper: #002b36;
  --card: #073642;
  --ink: #eee8d5;
  --muted: #839496;
  --line: #12495a;
  --green: #4ea8e0;
  --danger: #ef5350;
  --lime: #9aab1f;
  --lime-ink: #073642;
}
:root[data-theme="nord-light"], .hm-pal-nord-light {
  --paper: #e5e9f0;
  --card: #f7f9fb;
  --ink: #2e3440;
  --muted: #6a7284;
  --line: #d8dee9;
  --green: #5e81ac;
  --danger: #a54f57;
  --lime: #6a8a52;
  --lime-ink: #ffffff;
}
:root[data-theme="nord-dark"], .hm-pal-nord-dark {
  --paper: #2e3440;
  --card: #3b4252;
  --ink: #eceff4;
  --muted: #7b88a1;
  --line: #4c566a;
  --green: #88c0d0;
  --danger: #bf616a;
  --lime: #a3be8c;
  --lime-ink: #3b4252;
}
:root[data-theme="dracula-dark"], .hm-pal-dracula-dark {
  --paper: #1e1f29;
  --card: #282a36;
  --ink: #f8f8f2;
  --muted: #6272a4;
  --line: #44475a;
  --green: #bd93f9;
  --danger: #ff5555;
  --lime: #50fa7b;
  --lime-ink: #282a36;
}
:root[data-theme="tokyo-night-light"], .hm-pal-tokyo-night-light {
  --paper: #d5d6db;
  --card: #f4f4f8;
  --ink: #343b58;
  --muted: #787c99;
  --line: #c6c8d1;
  --green: #34548a;
  --danger: #8c4351;
  --lime: #385f4a;
  --lime-ink: #ffffff;
}
:root[data-theme="tokyo-night-dark"], .hm-pal-tokyo-night-dark {
  --paper: #16161e;
  --card: #1f2335;
  --ink: #c0caf5;
  --muted: #565f89;
  --line: #2f334d;
  --green: #7aa2f7;
  --danger: #f7768e;
  --lime: #9ece6a;
  --lime-ink: #1f2335;
}
:root[data-theme="one-light"], .hm-pal-one-light {
  --paper: #eaeaeb;
  --card: #fafafa;
  --ink: #383a42;
  --muted: #9d9fa6;
  --line: #d7d7db;
  --green: #4078f2;
  --danger: #e45649;
  --lime: #50a14f;
  --lime-ink: #ffffff;
}
:root[data-theme="one-dark"], .hm-pal-one-dark {
  --paper: #21252b;
  --card: #282c34;
  --ink: #abb2bf;
  --muted: #5c6370;
  --line: #3e4451;
  --green: #61afef;
  --danger: #e06c75;
  --lime: #98c379;
  --lime-ink: #282c34;
}
:root[data-theme="gruvbox-light"], .hm-pal-gruvbox-light {
  --paper: #ebdbb2;
  --card: #f9f5d7;
  --ink: #3c3836;
  --muted: #7c6f64;
  --line: #d5c4a1;
  --green: #076678;
  --danger: #9d0006;
  --lime: #79740e;
  --lime-ink: #ffffff;
}
:root[data-theme="gruvbox-dark"], .hm-pal-gruvbox-dark {
  --paper: #1d2021;
  --card: #32302f;
  --ink: #ebdbb2;
  --muted: #928374;
  --line: #504945;
  --green: #83a598;
  --danger: #fb4934;
  --lime: #b8bb26;
  --lime-ink: #32302f;
}
:root[data-theme="catppuccin-latte"], .hm-pal-catppuccin-latte {
  --paper: #dce0e8;
  --card: #eff1f5;
  --ink: #4c4f69;
  --muted: #8c8fa1;
  --line: #ccd0da;
  --green: #1e66f5;
  --danger: #d20f39;
  --lime: #40a02b;
  --lime-ink: #ffffff;
}
:root[data-theme="catppuccin-mocha"], .hm-pal-catppuccin-mocha {
  --paper: #11111b;
  --card: #1e1e2e;
  --ink: #cdd6f4;
  --muted: #9399b2;
  --line: #313244;
  --green: #89b4fa;
  --danger: #f38ba8;
  --lime: #a6e3a1;
  --lime-ink: #1e1e2e;
}
:root[data-theme="rose-pine-dawn"], .hm-pal-rose-pine-dawn {
  --paper: #faf4ed;
  --card: #fffaf3;
  --ink: #575279;
  --muted: #9893a5;
  --line: #dfdad9;
  --green: #907aa9;
  --danger: #b4637a;
  --lime: #5a8a63;
  --lime-ink: #ffffff;
}
:root[data-theme="rose-pine-main"], .hm-pal-rose-pine-main {
  --paper: #191724;
  --card: #1f1d2e;
  --ink: #e0def4;
  --muted: #908caa;
  --line: #26233a;
  --green: #c4a7e7;
  --danger: #eb6f92;
  --lime: #8fbfa0;
  --lime-ink: #1f1d2e;
}
:root[data-theme="everforest-light"], .hm-pal-everforest-light {
  --paper: #f0eed6;
  --card: #fdf6e3;
  --ink: #5c6a72;
  --muted: #939f91;
  --line: #ddd8be;
  --green: #3a94c5;
  --danger: #f85552;
  --lime: #8da101;
  --lime-ink: #ffffff;
}
:root[data-theme="everforest-dark"], .hm-pal-everforest-dark {
  --paper: #232a2e;
  --card: #2d353b;
  --ink: #d3c6aa;
  --muted: #859289;
  --line: #3d484d;
  --green: #7fbbb3;
  --danger: #e67e80;
  --lime: #a7c080;
  --lime-ink: #2d353b;
}
:root[data-theme="night-owl-light"], .hm-pal-night-owl-light {
  --paper: #eef1f4;
  --card: #ffffff;
  --ink: #403f53;
  --muted: #90a7b2;
  --line: #d9d9e3;
  --green: #4876d6;
  --danger: #de3d3b;
  --lime: #08916a;
  --lime-ink: #ffffff;
}
:root[data-theme="night-owl-dark"], .hm-pal-night-owl-dark {
  --paper: #010e1c;
  --card: #011627;
  --ink: #d6deeb;
  --muted: #637777;
  --line: #1d3b53;
  --green: #82aaff;
  --danger: #ef5350;
  --lime: #22da6e;
  --lime-ink: #011627;
}

/* ── 파생 토큰 — seed에서 만든다. 하드코딩 색의 대체물 ─────────── */
:root {
  --card-2: color-mix(in oklab, var(--card) 70%, var(--paper));
  --well: color-mix(in oklab, var(--card) 45%, var(--paper));
  --chip: color-mix(in oklab, var(--ink) 7%, var(--card));
  --track: color-mix(in oklab, var(--ink) 9%, var(--card));
  --accent-soft: color-mix(in oklab, var(--green) 10%, var(--card));
  --danger-soft: color-mix(in oklab, var(--danger) 12%, var(--card));
  --line-strong: color-mix(in oklab, var(--muted) 45%, var(--line));
  --green-strong: color-mix(in oklab, var(--green) 82%, var(--ink));
  --green-2: color-mix(in oklab, var(--green) 80%, var(--muted));
  --header-bg: color-mix(in srgb, var(--paper) 92%, transparent);
}

/* ── 밝기에 딸린 값 — 어두운 팔레트의 액센트는 밝은 색이라 그 위의
      글자는 어두워야 한다 ─────────────────────────────────────── */
:root {
  --accent-ink: #ffffff;
  color-scheme: light;
}
:root[data-appearance="dark"] {
  --accent-ink: var(--card);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance]) {
    --accent-ink: var(--card);
    color-scheme: dark;
  }
}