/* Theme contract: light is the original design; dark changes color, never geometry.
   Legacy UI declarations use --wm-mode-* with their original light value as fallback.
   Only screen media defines those variables, so print remains the original paper UI. */
/* Ask supporting browsers to preserve our light palette instead of auto-darkening it.
   Samsung Internet Force Dark can ignore this; it is not an override of that setting. */
html[data-wm-theme="light"] { color-scheme: only light; }

/* Default profile artwork is baked onto an opaque tile so browser SVG
   recoloring cannot independently darken its body/outline. Keep this scoped to
   known avatar containers: uploaded photos and other brand illustrations stay
   untouched. The filename prefix also matches production's manifest hash. */
@media screen and (forced-colors: none) {
  html { --wm-default-avatar-art: url("../images/logo/whalemath_avatar_light.4ef84b8f35f6.png"); }
  html[data-wm-theme="dark"] {
    --wm-default-avatar-art: url("../images/logo/whalemath_avatar_dark.724f9689ee44.png");
  }
  html :is(
    :is(.wm-avatar, .wm-home-identity > div:first-child, .profile-avatar,
      .avatar-upload .avatar, .wm-service-header__avatar, .wm-index-avatar,
      .wm-index-menu-avatar, .wm-hall-avatar--whale) > img,
    .wm-profile-setup-page img[alt="기본 프로필 이미지"]
  )[src*="/images/logo/whalemath_logo_only_whale_no_bg."] {
    content: var(--wm-default-avatar-art);
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: cover;
    border-radius: inherit;
    filter: none !important;
  }
}

@media screen {
  html[data-wm-theme="dark"] {
    color-scheme: dark;
    --wm-theme-ink: #e8ecff;
    --wm-theme-muted: #acb7d1;
    --wm-theme-line: #303c59;
    --wm-theme-surface: #151d32;
    --wm-theme-soft: #101729;
    --wm-theme-primary: #b5a0ff;
    /* Pale text accents and solid action fills have different contrast needs. */
    --wm-theme-action: #7850ed;
    --wm-theme-on-action: #ffffff;
    --wm-theme-primary-rgb: 181, 160, 255;
    --wm-theme-primary-dark: #cec0ff;
    --wm-theme-primary-gradient: linear-gradient(135deg, #7850ed, #5133b3);
    --wm-theme-primary-gradient-hover: linear-gradient(135deg, #8560f5, #6241c9);
    --wm-theme-primary-shadow: 0 0 0 1px #b5a0ff40, 0 0 24px #8c63ff38, 0 8px 22px #0005;
    --wm-theme-success: #61dfba;
    --wm-theme-success-soft: #12372f;
    --wm-theme-danger: #ff91ab;
    --wm-theme-danger-dark: #ff91ab;
    --wm-theme-amber: #ffd18b;
    --wm-theme-accent-blue: #91c4ff;
    --wm-theme-accent-cyan: #7ce7ee;
    --wm-theme-accent-cyan-rgb: 124, 231, 238;
    --wm-theme-connector-line: #b5a0ff80;
    --wm-theme-progress-gradient: linear-gradient(90deg, #936bff, #7ce7ee);
    --wm-mode-text: #e8ecff;
    --wm-mode-muted: #acb7d1;
    --wm-mode-violet: #c1b0ff;
    --wm-mode-blue: #91c4ff;
    --wm-mode-green: #61dfba;
    --wm-mode-red: #ff91ab;
    --wm-mode-amber: #ffd18b;
    --wm-mode-surface: #151d32;
    --wm-mode-soft: #1d2841;
    --wm-mode-line: #35425f;
    --wm-mode-violet-soft: #2a2448;
    --wm-mode-blue-soft: #192e46;
    --wm-mode-green-soft: #12372f;
    --wm-mode-red-soft: #3d2336;
    --wm-mode-amber-soft: #3b3022;
    --wm-mode-surface-rgb: 21, 29, 50;
    --wm-mode-soft-rgb: 29, 40, 65;
    --wm-mode-line-rgb: 53, 66, 95;
    --wm-mode-text-rgb: 232, 236, 255;
    --wm-mode-muted-rgb: 172, 183, 209;
    --wm-mode-violet-rgb: 193, 176, 255;
    --wm-mode-blue-rgb: 145, 196, 255;
    --wm-mode-green-rgb: 97, 223, 186;
    --wm-mode-red-rgb: 255, 145, 171;
    --wm-mode-amber-rgb: 255, 209, 139;
    --wm-service-accent-background: linear-gradient(125deg, #9870ff29, #63dcec12);
    --wm-service-accent-text: #d5c7ff;
    --wm-service-accent-shadow: inset 0 0 0 1px #b19aff40, 0 0 22px #9b70ff18;
    --wm-screen-settings-page-background: transparent;
    background: #0b1020;
    scrollbar-color: #526087 #101729;
  }

  html[data-wm-theme="dark"] body {
    color: var(--wm-theme-ink);
    background: radial-gradient(ellipse at 12% 0%, #7351ce12, transparent 48%),
      radial-gradient(ellipse at 95% 10%, #43d4e40a, transparent 40%), #0b1020 !important;
  }
  html[data-wm-theme="dark"] ::selection { background: #a085ff66; color: #fff; }
  html[data-wm-theme="dark"] :focus-visible { outline-color: #b5a0ff; }
  html[data-wm-theme="dark"] :is(input, select, textarea) { accent-color: #a88bff; }

  /* Tailwind's generated sheet stays untouched. These adapters also cover utility
     classes inserted by existing page scripts, without changing their dimensions. */
  html[data-wm-theme="dark"] :is(.bg-white, .bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100) {
    background-color: var(--wm-theme-surface) !important;
  }
  html[data-wm-theme="dark"] :is(.text-slate-900, .text-slate-800, .text-slate-700, .text-gray-900, .text-gray-800, .text-gray-700, .text-black, [class~="text-[darkslateblue]"]) {
    color: var(--wm-theme-ink) !important;
  }
  html[data-wm-theme="dark"] :is(.text-slate-600, .text-slate-500, .text-gray-600, .text-gray-500) {
    color: var(--wm-theme-muted) !important;
  }
  html[data-wm-theme="dark"] :is(.border-slate-100, .border-slate-200, .border-slate-300, .border-gray-100, .border-gray-200, .border-gray-300) {
    border-color: var(--wm-theme-line) !important;
  }
  html[data-wm-theme="dark"] :is(.hover\:bg-white:hover, .hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover) {
    background-color: var(--wm-mode-soft, #f6f7fb) !important;
  }

  /* Service chrome: neon lives on selected navigation and actions, not body text. */
  html[data-wm-theme="dark"] .wm-service-sidebar {
    background: #101729;
    border-color: #2b3552;
    backdrop-filter: none;
    box-shadow: none;
  }
  html[data-wm-theme="dark"] :is(.wm-screen-settings-panel, .panel, .summary-item) {
    box-shadow: 0 16px 40px #0003, inset 0 1px 0 #c9bdff08;
  }
  html[data-wm-theme="dark"] .wm-screen-theme-title { color: var(--wm-theme-ink); }
  html[data-wm-theme="dark"] .wm-screen-theme-input:checked + .wm-screen-theme-card {
    box-shadow: 0 0 0 2px #b5a0ff26, 0 0 22px #9b70ff42;
  }
  html[data-wm-theme="dark"] :is(.status-dot, .wm-screen-theme-status) { box-shadow: 0 0 12px #61dfba55; }
  html[data-wm-theme="dark"] .channel-toggle > span:not(.sr-only)::after { background: #fff; }
  html[data-wm-theme="dark"] :is(.wm-primary-gradient, .wm-brand-notice__button--primary) {
    box-shadow: var(--wm-theme-primary-shadow);
  }
  html[data-wm-theme="dark"] .wm-progress-gradient { box-shadow: 0 0 12px #936bff40; }
  html[data-wm-theme="dark"] .content-mode-current-badge__text {
    background: none;
    color: #cec0ff;
    -webkit-text-fill-color: currentColor;
  }

  /* Learning chrome is dark; ink swatches below still preview the real paper color. */
  html[data-wm-theme="dark"] .content-mode-quick-tools .pni-header-ink-entry {
    background: var(--wm-theme-surface);
    color: var(--wm-theme-primary-dark);
    border-color: var(--wm-theme-line);
  }
  html[data-wm-theme="dark"] .content-mode-quick-tools .pni-header-ink-entry:is(:hover, :focus-visible, [aria-pressed="true"]) {
    background: var(--wm-mode-violet-soft);
    border-color: var(--wm-theme-primary);
    outline-color: var(--wm-theme-primary);
  }
  html[data-wm-theme="dark"] .pni-shared-ink-toolbar {
    --pni-personal: var(--wm-theme-primary);
    --pni-personal-strong: var(--wm-theme-primary-dark);
    --pni-personal-pale: var(--wm-mode-violet-soft);
    background: var(--wm-theme-soft);
    border-color: var(--wm-theme-line);
    box-shadow: 0 8px 24px #0003;
  }
  html[data-wm-theme="dark"] .pni-shared-ink-toolbar > .pni-ink__tools {
    background: transparent;
  }
  html[data-wm-theme="dark"] .pni-shared-ink-toolbar :is(.worksheet-scratchpad-tool, .pni-button, .pni-shared-ink-toolbar__close, .pni-history-controls) {
    background: var(--wm-theme-surface);
    color: var(--wm-theme-primary-dark);
    border-color: var(--wm-theme-line);
  }
  html[data-wm-theme="dark"] .pni-shared-ink-toolbar :is(.worksheet-scratchpad-tool, .pni-button, .pni-shared-ink-toolbar__close):is(:hover, :focus-visible, [aria-pressed="true"]) {
    background: var(--wm-mode-violet-soft);
    border-color: var(--wm-theme-primary);
  }
  html[data-wm-theme="dark"] .pni-shared-ink-toolbar :focus-visible {
    outline: 2px solid var(--wm-theme-primary);
    outline-offset: 2px;
  }
  html[data-wm-theme="dark"] .pni-shared-ink-toolbar__move { color: var(--wm-theme-muted); }
  html[data-wm-theme="dark"] .pni-shared-ink-toolbar .pni-ink__appearance-trigger,
  html[data-wm-theme="dark"] .pni-shared-ink-toolbar .pni-ink__appearance-trigger:is(:hover, :focus-visible, [aria-expanded="true"]) {
    background: #f5f3ff;
    border-color: #b5a0ff;
  }
  html[data-wm-theme="dark"] [data-learning-menu="true"] .clp-focus-assessment {
    --clp-focus-accent: var(--wm-theme-primary-dark);
    --clp-focus-tint: var(--wm-mode-violet-soft);
  }

  /* Only monochrome brand marks are recolored. Photos, mathematical SVGs and
     user-uploaded images must never be inverted. */
  html[data-wm-theme="dark"] img[src*="whalemath_logo_kor_light.svg"] {
    content: url("../images/logo/whalemath_logo_kor_white_stroke_no_bg.e745eeb98fd9.svg");
    filter: drop-shadow(0 0 8px #ac8cff30);
  }
  html[data-wm-theme="dark"] img[src*="whalemath_logo_eng_white_stroke_white_bg.svg"] {
    filter: brightness(.9) invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
  }

  html[data-wm-theme="dark"] :is(.text-purple-500, .text-purple-600, .text-purple-700, .text-violet-600, .text-indigo-600, .text-indigo-700) { color: var(--wm-theme-primary); }
  html[data-wm-theme="dark"] :is(.text-red-500, .text-red-600, .text-red-700, .text-rose-600) { color: var(--wm-theme-danger); }
  html[data-wm-theme="dark"] :is(.text-green-600, .text-emerald-600, .text-emerald-700, .text-teal-600) { color: var(--wm-theme-success); }
  html[data-wm-theme="dark"] :is(.text-blue-600, .text-blue-700, .text-sky-600) { color: var(--wm-theme-accent-blue); }
  html[data-wm-theme="dark"] :is(.bg-purple-50, .bg-purple-100, .bg-violet-50, .bg-indigo-50, .bg-indigo-100) { background-color: var(--wm-mode-violet-soft, #f5f3ff); }
  html[data-wm-theme="dark"] :is(.bg-red-50, .bg-red-100, .bg-rose-50) { background-color: var(--wm-mode-red-soft, #fff1f2); }
  html[data-wm-theme="dark"] :is(.bg-emerald-50, .bg-green-50, .bg-teal-50) { background-color: var(--wm-mode-green-soft, #e9fbf5); }

  /* Explicit original-color islands only: diagrams and the ink color picker.
     Keep explicit paper light, including nested UI tokens. Lessons follow theme. */
  html[data-wm-theme="dark"] :is([data-wm-theme-paper], .pni-ink__tool-flyout) {
    color-scheme: light;
    color: #202238;
    background: #fff;
    --wm-theme-ink: #2f2a68;
    --wm-theme-muted: #667085;
    --wm-theme-line: #e6e9f3;
    --wm-theme-surface: #fff;
    --wm-theme-soft: #f6f7fb;
    --wm-theme-primary: #6d4aff;
    --wm-theme-action: #6d4aff;
    --wm-theme-on-action: #ffffff;
    --wm-theme-primary-dark: #4d3d99;
    --wm-theme-primary-rgb: 109, 74, 255;
    --wm-theme-primary-gradient: linear-gradient(135deg, #6d4aff, #4d3d99);
    --wm-theme-primary-gradient-hover: linear-gradient(135deg, #5f3fff, #4d3d99);
    --wm-theme-primary-shadow: 0 14px 28px rgba(109, 74, 255, 0.24);
    --wm-theme-success: #087b62;
    --wm-theme-success-soft: #e9fbf5;
    --wm-theme-danger: #e5484d;
    --wm-theme-danger-dark: #b42329;
    --wm-theme-amber: #f59e0b;
    --wm-theme-accent-blue: #5e8fff;
    --wm-theme-accent-cyan: paleturquoise;
    --wm-theme-accent-cyan-rgb: 95, 200, 255;
    --wm-theme-connector-line: rgba(109, 74, 255, 0.36);
    --wm-theme-progress-gradient: linear-gradient(90deg, #4d3d99, #6d4aff);
    --wm-mode-text: initial;
    --wm-mode-muted: initial;
    --wm-mode-violet: initial;
    --wm-mode-blue: initial;
    --wm-mode-green: initial;
    --wm-mode-red: initial;
    --wm-mode-amber: initial;
    --wm-mode-surface: initial;
    --wm-mode-soft: initial;
    --wm-mode-line: initial;
    --wm-mode-violet-soft: initial;
    --wm-mode-blue-soft: initial;
    --wm-mode-green-soft: initial;
    --wm-mode-red-soft: initial;
    --wm-mode-amber-soft: initial;
    --wm-mode-surface-rgb: initial;
    --wm-mode-soft-rgb: initial;
    --wm-mode-line-rgb: initial;
    --wm-mode-text-rgb: initial;
    --wm-mode-muted-rgb: initial;
    --wm-mode-violet-rgb: initial;
    --wm-mode-blue-rgb: initial;
    --wm-mode-green-rgb: initial;
    --wm-mode-red-rgb: initial;
    --wm-mode-amber-rgb: initial;
    --wm-ink: var(--wm-theme-ink);
    --wm-muted: var(--wm-theme-muted);
    --wm-line: var(--wm-theme-line);
    --wm-surface: var(--wm-theme-surface);
    --wm-soft: var(--wm-theme-soft);
    --wm-primary: var(--wm-theme-primary);
    --wm-primary-dark: var(--wm-theme-primary-dark);
    --wm-primary-gradient: var(--wm-theme-primary-gradient);
    --wm-primary-gradient-hover: var(--wm-theme-primary-gradient-hover);
    --wm-danger: var(--wm-theme-danger);
    --ink: var(--wm-theme-ink);
    --muted: var(--wm-theme-muted);
    --line: var(--wm-theme-line);
    --surface: var(--wm-theme-surface);
    --soft: var(--wm-theme-soft);
    --primary: var(--wm-theme-primary);
    --primary-dark: var(--wm-theme-primary-dark);
    --danger: var(--wm-theme-danger);
  }

  /* This editing viewport overlays the official lesson as well as the memo.
     Keep its overlay transparent: the stage beneath it supplies the paper. */
  html[data-wm-theme="dark"] .pni-editor-viewport--workspace { background: transparent; }

  /* Authentication's old dark template now has a genuine light counterpart. */
  html[data-wm-theme="light"] body.wm-auth-page {
    color: #2f2a68;
    background: linear-gradient(150deg, #f8f7ff, #f3f9fe);
  }
  html[data-wm-theme="light"] .wm-auth-page :is(.text-white, .text-slate-50, .text-slate-100, .text-slate-200, .text-slate-300) { color: #2f2a68; }
  html[data-wm-theme="light"] .wm-auth-page :is(.text-slate-400, .text-slate-500) { color: #667085; }
  html[data-wm-theme="light"] .wm-auth-page :is(.bg-slate-800, .bg-slate-900, [class*="bg-slate-800/"], [class*="bg-slate-900/"]) { background-color: #fff; }
  html[data-wm-theme="light"] .wm-auth-page :is(.form-input, .form-textarea, .form-select) {
    color: #2f2a68;
    background-color: #fff;
    border-color: #d9dded;
  }
  html[data-wm-theme="light"] .wm-auth-page :is(.border-slate-700, .border-slate-800) { border-color: #d9dded; }
  html[data-wm-theme="light"] .wm-auth-page :is(.bg-purple-500, .bg-purple-600, [type="submit"]) { color: #fff; }
  html[data-wm-theme="light"] .wm-auth-page img[src*="whalemath_logo_kor_white_stroke_no_bg.svg"] {
    content: url("../images/logo/whalemath_logo_kor_light.62a99bb70884.svg");
    filter: none;
  }
  html[data-wm-theme="light"] .wm-auth-page [class*="background:linear-gradient(var(--color-slate-900)"] {
    background: #fff;
    border-color: #d9dded;
  }
  html[data-wm-theme="light"] .wm-auth-page [class*="before:bg-slate-800"]::before { background: transparent; }
  html[data-wm-theme="light"] .wm-auth-page .text-purple-500 { color: #6d4aff; }
  html[data-wm-theme="light"] .wm-auth-page form [type="submit"] {
    background: linear-gradient(135deg, #6d4aff, #4d3d99);
    box-shadow: 0 10px 22px #6d4aff26;
  }
  html[data-wm-theme="dark"] .wm-auth-page img[src*="whalemath_logo_kor_white_stroke_no_bg.svg"] {
    filter: drop-shadow(0 0 7px #b5a0ff70) drop-shadow(0 0 20px #7ce7ee20);
  }
  html[data-wm-theme="dark"] .wm-auth-page form [type="submit"] {
    color: #fff;
    background: var(--wm-theme-primary-gradient);
    box-shadow: var(--wm-theme-primary-shadow);
  }
}

@media print {
  html[data-wm-theme] { color-scheme: light; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-screen-theme-card { transition: none; }
}