/* Non-seasonal theme worlds: final layer loaded after experience-redesign.css.
   It gives sakura / indigo / matcha / yomatsuri their own assets and token
   contracts without disturbing the default shun seasonal system. */

html[data-theme="sakura"] {
  --ink: #2e2730;
  --ink-soft: #6a5a62;
  --ink-faint: #a08d94;
  --paper: #fff8f4;
  --paper-warm: #f5e7de;
  --surface: rgba(255, 252, 248, 0.92);
  --line: rgba(203, 174, 170, 0.72);
  --line-strong: rgba(168, 123, 132, 0.82);
  --sakura: #d995a8;
  --sakura-deep: #8e3f5d;
  --sakura-ink: #7b354f;
  --matcha: #7f9b76;
  --matcha-dark: #566f4f;
  --indigo: #4a6076;
  --indigo-soft: #eadfe5;
  --koi: #bb684d;
  --gold: #c4a15f;
  --wood: #9e6f58;
  --theme-accent: #c76f8b;
  --theme-accent-strong: #8e3f5d;
  --theme-accent-tint: #f7e5ec;
  --theme-on-accent: #fff;
  --theme-bg: #fff8f4;
  --theme-bg-soft: #f5e7de;
  --theme-rail-surface: #fff0f2;
  --theme-rail-text: #553341;
  --theme-art: url("/static/assets/theme-sakura-hero.jpg");
  --theme-preview-art: url("/static/assets/theme-sakura-preview.jpg");
  --theme-login-bg: url("/static/assets/theme-sakura-login.jpg");
  --theme-login-panel: url("/static/assets/theme-sakura-login-panel.jpg");
  --theme-agent-art: url("/static/assets/theme-sakura-agent-head.jpg");
  --theme-shadow: 0 22px 62px rgba(102, 60, 72, 0.14);
  --theme-shadow-card: 0 10px 28px rgba(102, 60, 72, 0.09);
  --theme-ambient-opacity: 0.18;
  color-scheme: light;
}

html[data-theme="indigo"] {
  --ink: #1f2d43;
  --ink-soft: #526174;
  --ink-faint: #87919c;
  --paper: #f8fbfb;
  --paper-warm: #e7eef2;
  --surface: rgba(252, 254, 254, 0.92);
  --line: rgba(154, 177, 190, 0.72);
  --line-strong: rgba(96, 126, 150, 0.82);
  --sakura: #c8907d;
  --sakura-deep: #3f638a;
  --sakura-ink: #213e60;
  --matcha: #78936f;
  --matcha-dark: #4e6f48;
  --indigo: #213e60;
  --indigo-soft: #dce8f2;
  --koi: #a96544;
  --gold: #b58f4e;
  --wood: #8a6a55;
  --theme-accent: #3f638a;
  --theme-accent-strong: #213e60;
  --theme-accent-tint: #dce8f2;
  --theme-on-accent: #fff;
  --theme-bg: #f8fbfb;
  --theme-bg-soft: #e7eef2;
  --theme-rail-surface: #e8f0f4;
  --theme-rail-text: #20344f;
  --theme-art: url("/static/assets/theme-indigo-hero.jpg");
  --theme-preview-art: url("/static/assets/theme-indigo-preview.jpg");
  --theme-login-bg: url("/static/assets/theme-indigo-login.jpg");
  --theme-login-panel: url("/static/assets/theme-indigo-login-panel.jpg");
  --theme-agent-art: url("/static/assets/theme-indigo-agent-head.jpg");
  --theme-shadow: 0 22px 62px rgba(31, 55, 83, 0.14);
  --theme-shadow-card: 0 10px 28px rgba(31, 55, 83, 0.09);
  --theme-ambient-opacity: 0.2;
  color-scheme: light;
}

html[data-theme="matcha"] {
  --ink: #263127;
  --ink-soft: #5a6757;
  --ink-faint: #8b9585;
  --paper: #fbfff6;
  --paper-warm: #edf4e4;
  --surface: rgba(253, 255, 248, 0.92);
  --line: rgba(178, 199, 158, 0.74);
  --line-strong: rgba(122, 151, 95, 0.84);
  --sakura: #c99684;
  --sakura-deep: #587c49;
  --sakura-ink: #425f36;
  --matcha: #6f8f58;
  --matcha-dark: #425f36;
  --indigo: #2f5265;
  --indigo-soft: #dfeadf;
  --koi: #ae6848;
  --gold: #b49356;
  --wood: #8f714f;
  --theme-accent: #6f8f58;
  --theme-accent-strong: #425f36;
  --theme-accent-tint: #e5efdc;
  --theme-on-accent: #fff;
  --theme-bg: #fbfff6;
  --theme-bg-soft: #edf4e4;
  --theme-rail-surface: #eef5e7;
  --theme-rail-text: #344b34;
  --theme-art: url("/static/assets/theme-matcha-hero.jpg");
  --theme-preview-art: url("/static/assets/theme-matcha-preview.jpg");
  --theme-login-bg: url("/static/assets/theme-matcha-login.jpg");
  --theme-login-panel: url("/static/assets/theme-matcha-login-panel.jpg");
  --theme-agent-art: url("/static/assets/theme-matcha-agent-head.jpg");
  --theme-shadow: 0 22px 62px rgba(52, 79, 44, 0.13);
  --theme-shadow-card: 0 10px 28px rgba(52, 79, 44, 0.08);
  --theme-ambient-opacity: 0.16;
  color-scheme: light;
}

html[data-theme="yomatsuri"] {
  --ink: #f8ecd6;
  --ink-soft: #d9c7a9;
  --ink-faint: #a9987e;
  --paper: #0f2136;
  --paper-warm: #172c45;
  --surface: rgba(20, 39, 61, 0.9);
  --line: rgba(226, 184, 107, 0.25);
  --line-strong: rgba(226, 184, 107, 0.42);
  --sakura: #d99575;
  --sakura-deep: #e2b86b;
  --sakura-ink: #f0c87a;
  --matcha: #9aa772;
  --matcha-dark: #c8d091;
  --indigo: #e2b86b;
  --indigo-soft: #253f5f;
  --koi: #d77c50;
  --gold: #e2b86b;
  --wood: #bd8356;
  --theme-accent: #e2b86b;
  --theme-accent-strong: #f0c87a;
  --theme-accent-tint: #253f5f;
  --theme-on-accent: #13243a;
  --theme-bg: #0f2136;
  --theme-bg-soft: #172c45;
  --theme-rail-surface: #10233a;
  --theme-rail-text: #f5ead5;
  --theme-art: url("/static/assets/theme-yomatsuri-hero.jpg");
  --theme-preview-art: url("/static/assets/theme-yomatsuri-preview.jpg");
  --theme-login-bg: url("/static/assets/theme-yomatsuri-login.jpg");
  --theme-login-panel: url("/static/assets/theme-yomatsuri-login-panel.jpg");
  --theme-agent-art: url("/static/assets/theme-yomatsuri-agent-head.jpg");
  --theme-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  --theme-shadow-card: 0 14px 34px rgba(0, 0, 0, 0.28);
  --theme-ambient-opacity: 0.42;
  color-scheme: dark;
}

html.theme-assets-fallback:not([data-theme="shun"]) {
  --theme-art: url("/static/assets/theme-fallback-washi.jpg");
  --theme-preview-art: url("/static/assets/theme-fallback-washi.jpg");
  --theme-login-bg: url("/static/assets/theme-fallback-washi.jpg");
  --theme-login-panel: url("/static/assets/theme-fallback-washi.jpg");
  --theme-agent-art: url("/static/assets/theme-fallback-washi.jpg");
}

html:not([data-theme="shun"]) body {
  background:
    radial-gradient(circle at 10% 12%, color-mix(in srgb, var(--theme-accent) 10%, transparent), transparent 26%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 25%),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-bg) 92%, white 8%) 0%, var(--theme-bg-soft) 100%);
  color: var(--ink);
}

html:not([data-theme="shun"]) body::before {
  background-image: var(--theme-art);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: min(1120px, 74vw) auto;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.36) 44%, rgba(0,0,0,0.8) 100%);
  opacity: calc(var(--theme-ambient-opacity) * 0.72);
}

html:not([data-theme="shun"]) .app-shell {
  background: color-mix(in srgb, var(--theme-bg) 82%, white 18%);
  border-color: color-mix(in srgb, var(--theme-accent) 16%, var(--line));
  box-shadow: var(--theme-shadow);
}

html:not([data-theme="shun"]) body.app-ready .app-workspace {
  background:
    radial-gradient(circle at 94% 4%, color-mix(in srgb, var(--theme-accent) 8%, transparent), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-bg) 96%, white 4%) 0%, var(--theme-bg-soft) 100%);
  color: var(--ink);
}

@media (min-width: 1024px) {
  html:not([data-theme="shun"]) body.app-ready .app-rail {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--theme-rail-surface) 96%, white 4%), var(--theme-rail-surface)),
      var(--theme-preview-art) center bottom / cover no-repeat;
    border-right-color: color-mix(in srgb, var(--theme-accent) 24%, var(--line));
    box-shadow:
      inset -1px 0 color-mix(in srgb, var(--line) 68%, transparent),
      14px 0 34px color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--theme-rail-text);
  }
}

html:not([data-theme="shun"]) body.app-ready .app-rail header,
html:not([data-theme="shun"]) body.app-ready .engine-status-rail {
  background: color-mix(in srgb, var(--theme-bg) 72%, transparent);
  border-color: color-mix(in srgb, var(--theme-accent) 22%, var(--line));
  color: var(--theme-rail-text);
}

html:not([data-theme="shun"]) body.app-ready .brand-jp,
html:not([data-theme="shun"]) body.app-ready .brand-zh,
html:not([data-theme="shun"]) body.app-ready .rail-tagline,
html:not([data-theme="shun"]) body.app-ready .engine-status-rail {
  color: var(--theme-rail-text);
}

html:not([data-theme="shun"]) body.app-ready .tab {
  background: color-mix(in srgb, var(--theme-bg) 54%, transparent);
  border-color: color-mix(in srgb, var(--theme-accent) 15%, var(--line));
  color: var(--theme-rail-text);
}

html:not([data-theme="shun"]) body.app-ready .tab:hover {
  background: color-mix(in srgb, var(--theme-accent-tint) 72%, var(--theme-bg));
  border-color: color-mix(in srgb, var(--theme-accent) 32%, var(--line));
}

html:not([data-theme="shun"]) body.app-ready .tab.active,
html:not([data-theme="shun"]) body.app-ready .tab.active:hover,
html:not([data-theme="shun"]) .btn-primary,
html:not([data-theme="shun"]) .btn-ai,
html:not([data-theme="shun"]) .btn-add,
html:not([data-theme="shun"]) .btn-next,
html:not([data-theme="shun"]) .seg.active,
html:not([data-theme="shun"]) .verb-chip.active,
html:not([data-theme="shun"]) .vocab-tab.active {
  background: var(--theme-accent-strong) !important;
  background-image: none !important;
  border-color: color-mix(in srgb, var(--theme-accent) 68%, var(--line)) !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--theme-accent-strong) 22%, transparent) !important;
  color: var(--theme-on-accent) !important;
}

html:not([data-theme="shun"]) input:focus,
html:not([data-theme="shun"]) textarea:focus,
html:not([data-theme="shun"]) select:focus,
html:not([data-theme="shun"]) button:focus-visible,
html:not([data-theme="shun"]) .theme-card:focus-visible {
  border-color: var(--theme-accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 24%, transparent) !important;
}

html:not([data-theme="shun"]) .theme-panel,
html:not([data-theme="shun"]) .settings-panel,
html:not([data-theme="shun"]) .agent-panel {
  background:
    radial-gradient(circle at 94% 0, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent 28%),
    color-mix(in srgb, var(--theme-bg) 94%, white 6%);
  border-color: color-mix(in srgb, var(--theme-accent) 22%, var(--line));
}

html:not([data-theme="shun"]) .theme-card {
  background: color-mix(in srgb, var(--surface) 92%, white 8%);
  border-color: color-mix(in srgb, var(--theme-accent) 14%, var(--line));
}

html:not([data-theme="shun"]) .theme-card:hover,
html:not([data-theme="shun"]) .theme-card:focus-visible,
html:not([data-theme="shun"]) .theme-card.active {
  background: color-mix(in srgb, var(--theme-accent-tint) 70%, var(--theme-bg));
  border-color: color-mix(in srgb, var(--theme-accent) 52%, var(--line));
}

.theme-choice-art-sakura { background-image: var(--theme-sakura-preview, url("/static/assets/theme-sakura-preview.jpg")) !important; }
.theme-choice-art-indigo { background-image: var(--theme-indigo-preview, url("/static/assets/theme-indigo-preview.jpg")) !important; }
.theme-choice-art-matcha { background-image: var(--theme-matcha-preview, url("/static/assets/theme-matcha-preview.jpg")) !important; }
.theme-choice-art-yomatsuri { background-image: var(--theme-yomatsuri-preview, url("/static/assets/theme-yomatsuri-preview.jpg")) !important; }

html:not([data-theme="shun"]) .today-hero,
html:not([data-theme="shun"]) #godan .verb-stage {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--theme-bg) 98%, transparent) 0%, color-mix(in srgb, var(--theme-bg) 94%, transparent) 43%, color-mix(in srgb, var(--theme-bg) 42%, transparent) 69%, transparent 100%),
    var(--theme-art) 58% center / cover no-repeat !important;
  border-color: color-mix(in srgb, var(--theme-accent) 24%, var(--line-strong));
  box-shadow: var(--theme-shadow-card);
  color: var(--ink);
}

html[data-theme="yomatsuri"] .today-hero,
html[data-theme="yomatsuri"] #godan .verb-stage {
  background:
    linear-gradient(90deg, rgba(15, 33, 54, 0.98) 0%, rgba(15, 33, 54, 0.92) 43%, rgba(15, 33, 54, 0.44) 69%, transparent 100%),
    var(--theme-art) 58% center / cover no-repeat !important;
}

html:not([data-theme="shun"]) .today-eyebrow,
html:not([data-theme="shun"]) #today .today-card-kicker,
html:not([data-theme="shun"]) .verb-display .changing,
html:not([data-theme="shun"]) .form-name {
  color: var(--theme-accent-strong);
}

html[data-theme="yomatsuri"] .today-eyebrow,
html[data-theme="yomatsuri"] #today .today-card-kicker,
html[data-theme="yomatsuri"] .verb-display .changing,
html[data-theme="yomatsuri"] .form-name {
  color: var(--theme-accent-strong);
}

html:not([data-theme="shun"]) .today-primary {
  border-color: color-mix(in srgb, var(--theme-accent) 34%, var(--line)) !important;
}

html:not([data-theme="shun"]) .agent-head {
  --agent-head-tone: var(--theme-accent-strong);
  --agent-head-art: var(--theme-agent-art);
  background-color: var(--agent-head-tone);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--agent-head-tone) 96%, #111 4%) 0%, color-mix(in srgb, var(--agent-head-tone) 92%, transparent) 42%, color-mix(in srgb, var(--agent-head-tone) 66%, transparent) 72%, transparent 100%),
    linear-gradient(180deg, rgba(8, 20, 18, 0.04), rgba(8, 20, 18, 0.22)),
    var(--theme-agent-art);
  background-position: center, center, 72% 48%;
  background-repeat: no-repeat;
  background-size: auto, auto, cover;
}

html:not([data-theme="shun"]) .login-overlay {
  background:
    linear-gradient(90deg, rgba(12, 20, 28, 0.42), rgba(247, 242, 232, 0.12) 44%, color-mix(in srgb, var(--theme-bg) 66%, transparent) 100%),
    var(--theme-login-bg) center / cover no-repeat;
}

html:not([data-theme="shun"]) .login-art {
  background:
    linear-gradient(90deg, rgba(247,242,232,0.06), rgba(247,242,232,0.14)),
    var(--theme-login-panel) center / cover no-repeat;
}

html:not([data-theme="shun"]) .login-card,
html:not([data-theme="shun"]) .login-content {
  background: color-mix(in srgb, var(--theme-bg) 84%, transparent);
  border-color: color-mix(in srgb, var(--theme-accent) 22%, rgba(255,255,255,0.6));
}

html[data-theme="yomatsuri"] .login-card,
html[data-theme="yomatsuri"] .login-content,
html[data-theme="yomatsuri"] .login-form .field input,
html[data-theme="yomatsuri"] .login-existing,
html[data-theme="yomatsuri"] .login-overlay .login-card .btn-login-register {
  color: var(--ink);
}

html[data-theme="yomatsuri"] .login-form .field input {
  background: rgba(246, 239, 226, 0.94);
  color: #142338;
}

html[data-theme="yomatsuri"] .profile-bar,
html[data-theme="yomatsuri"] .profile-current,
html[data-theme="yomatsuri"] .profile-theme-quick,
html[data-theme="yomatsuri"] .profile-tools-toggle,
html[data-theme="yomatsuri"] .plan-badge,
html[data-theme="yomatsuri"] .btn-upgrade,
html[data-theme="yomatsuri"] .today-card,
html[data-theme="yomatsuri"] .today-map-card,
html[data-theme="yomatsuri"] .today-metric,
html[data-theme="yomatsuri"] .today-open-loop,
html[data-theme="yomatsuri"] .today-continue-card,
html[data-theme="yomatsuri"] .section-row,
html[data-theme="yomatsuri"] .section-title,
html[data-theme="yomatsuri"] .verb-picker,
html[data-theme="yomatsuri"] .track,
html[data-theme="yomatsuri"] .form-card,
html[data-theme="yomatsuri"] .tip,
html[data-theme="yomatsuri"] .practice-panel,
html[data-theme="yomatsuri"] .practice-surface,
html[data-theme="yomatsuri"] .courseware-form,
html[data-theme="yomatsuri"] .courseware-list,
html[data-theme="yomatsuri"] .courseware-draft,
html[data-theme="yomatsuri"] .scene-card,
html[data-theme="yomatsuri"] .srs-card,
html[data-theme="yomatsuri"] .book-card,
html[data-theme="yomatsuri"] .book-empty {
  background: color-mix(in srgb, var(--surface) 92%, #071421 8%) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--theme-shadow-card);
}

html[data-theme="yomatsuri"] .profile-current-name,
html[data-theme="yomatsuri"] .profile-current-caret,
html[data-theme="yomatsuri"] .profile-tools-label,
html[data-theme="yomatsuri"] .today-card strong,
html[data-theme="yomatsuri"] .today-map-card strong,
html[data-theme="yomatsuri"] .today-metric strong,
html[data-theme="yomatsuri"] .today-open-loop strong,
html[data-theme="yomatsuri"] .today-step-copy strong,
html[data-theme="yomatsuri"] .form-card strong,
html[data-theme="yomatsuri"] .form-name,
html[data-theme="yomatsuri"] .tip strong,
html[data-theme="yomatsuri"] .practice-title,
html[data-theme="yomatsuri"] .practice-panel-title,
html[data-theme="yomatsuri"] .courseware-list-title {
  color: var(--ink) !important;
}

html[data-theme="yomatsuri"] .today-card-kicker,
html[data-theme="yomatsuri"] .today-map-card .today-card-kicker,
html[data-theme="yomatsuri"] .today-metric strong,
html[data-theme="yomatsuri"] .today-primary-arrow,
html[data-theme="yomatsuri"] .today-step.active .today-step-copy strong {
  color: var(--theme-accent-strong) !important;
}

html[data-theme="yomatsuri"] .today-card small,
html[data-theme="yomatsuri"] .today-metric,
html[data-theme="yomatsuri"] .today-open-loop,
html[data-theme="yomatsuri"] .today-step-copy span,
html[data-theme="yomatsuri"] .form-use,
html[data-theme="yomatsuri"] .form-example .zh,
html[data-theme="yomatsuri"] .practice-muted {
  color: var(--ink-soft) !important;
}

html[data-theme="yomatsuri"] .seg:not(.active),
html[data-theme="yomatsuri"] .verb-chip:not(.active),
html[data-theme="yomatsuri"] .vocab-tab:not(.active) {
  background: color-mix(in srgb, var(--surface) 82%, #071421 18%) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html[data-theme="yomatsuri"] .example-list,
html[data-theme="yomatsuri"] .form-example,
html[data-theme="yomatsuri"] input,
html[data-theme="yomatsuri"] textarea,
html[data-theme="yomatsuri"] select {
  background: color-mix(in srgb, #0b1b2d 84%, var(--surface) 16%) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

html.theme-transitioning:not(.theme-reduced-motion) .app-workspace,
html.theme-transitioning:not(.theme-reduced-motion) .app-rail,
html.theme-transitioning:not(.theme-reduced-motion) .theme-panel,
html.theme-transitioning:not(.theme-reduced-motion) .agent-head,
html.theme-transitioning:not(.theme-reduced-motion) .today-hero,
html.theme-transitioning:not(.theme-reduced-motion) .verb-stage {
  transition:
    background 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transitioning .app-workspace,
  html.theme-transitioning .app-rail,
  html.theme-transitioning .theme-panel,
  html.theme-transitioning .agent-head,
  html.theme-transitioning .today-hero,
  html.theme-transitioning .verb-stage {
    transition: none !important;
  }
}

@media (max-width: 860px) {
  html:not([data-theme="shun"]) .today-hero,
  html:not([data-theme="shun"]) #godan .verb-stage {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--theme-bg) 98%, transparent) 0%, color-mix(in srgb, var(--theme-bg) 90%, transparent) 57%, color-mix(in srgb, var(--theme-bg) 28%, transparent) 100%),
      var(--theme-art) 62% center / cover no-repeat !important;
  }

  html[data-theme="yomatsuri"] .today-hero,
  html[data-theme="yomatsuri"] #godan .verb-stage {
    background:
      linear-gradient(90deg, rgba(15, 33, 54, 0.98) 0%, rgba(15, 33, 54, 0.88) 57%, rgba(15, 33, 54, 0.3) 100%),
      var(--theme-art) 62% center / cover no-repeat !important;
  }
}