/* Original portfolio color study, separate from Level's internal visual identity. */

/* A small, playful word illustration; the surrounding reading area stays neutral. */
.word-hero { background:linear-gradient(145deg,#fff4cf 0%,#ffeedf 48%,#f2e6ff 100%); }
.word-hero::before {
  content:""; position:absolute; width:34px; height:34px; right:24px; top:24px;
  background:#ee9064; clip-path:polygon(50% 0,62% 35%,100% 50%,62% 64%,50% 100%,36% 64%,0 50%,36% 35%);
  transform:rotate(12deg); pointer-events:none;
}
.word-hero::after {
  content:""; position:absolute; width:84px; height:84px; left:-31px; bottom:-25px;
  border-radius:50%; background:#bde3d4; pointer-events:none;
}
.hero-word span:first-child { color:#4d2c75; background:#ffda81; box-shadow:0 8px 20px #b7771b1c; }
.hero-word span:last-child { background:#fffaf2; }
.meaning-line { color:#5a5066; }

/* Color identifies the four stories. Text labels and selected states do the same job. */
#tab-ela,#panel-ela {
  --story:#6542a6; --story-tint:#f0e9fb; --story-shade:#392064;
  --blue:#6542a6; --accent:#8256c3; --tint:#f2edfb;
}
#tab-toys,#panel-toys {
  --story:#a14821; --story-tint:#fff0dd; --story-shade:#6d2c12;
  --blue:#a14821; --accent:#d77c3b; --tint:#fff2e5;
}
#tab-parent,#panel-parent {
  --story:#146b60; --story-tint:#e4f3ed; --story-shade:#0d433c;
  --blue:#146b60; --accent:#429986; --tint:#eaf5f0;
}
#tab-motion,#panel-motion {
  --story:#2359a8; --story-tint:#e6efff; --story-shade:#143569;
  --blue:#2359a8; --accent:#4f83ce; --tint:#edf3fd;
}
.case-tabs { background:#edf0f6; }
.case-tabs button { background:linear-gradient(145deg,#fff,var(--story-tint)); }
.case-tabs button:hover { background:var(--story-tint); }
.case-tabs button .case-tab-number { color:var(--story); }
.case-tabs button[aria-selected="true"],.case-tabs button[aria-selected="true"]:active {
  background:var(--story); color:#fff;
  box-shadow:inset 2px 3px 5px color-mix(in srgb,var(--story-shade) 65%,transparent),
    inset -2px -2px 5px #ffffff38,0 1px 1px #ffffffc4;
}
.case-tabs button[aria-selected="true"] .case-tab-number,
.case-tabs button[aria-selected="true"] .case-tab-preview { color:#fff; }

/* Keep the new colors on the learning stage and actionable controls. */
#panel-ela .lesson-stage { background:linear-gradient(145deg,#f9f0ff,#f0edfb); }
.demo-tabs button[aria-selected="true"],.demo-tabs button[aria-selected="true"]:active {
  background:var(--story); border-color:transparent;
  box-shadow:inset 2px 3px 5px #39206473,inset -2px -2px 5px #ffffff30;
}
.primary-action {
  background:linear-gradient(145deg,#7651b8,#60409f);
  box-shadow:inset 1px 1px 2px #c9a9ef99,inset -1px -2px 3px #35205f66,
    2px 3px 4px #8061a833,6px 7px 14px #a694bf3d,-4px -4px 10px #ffffff;
}
.primary-action:hover { background:linear-gradient(145deg,#6c47ad,#55358f); }
.primary-action:active { box-shadow:inset 2px 3px 5px #39206480,inset -2px -2px 5px #ffffff30; }
.answer-options button[aria-pressed="true"],.prefix-options button[aria-pressed="true"] {
  color:#56328f; background:#ece3f8;
  box-shadow:inset 2px 2px 4px #b6a5d352,inset -2px -2px 5px #fff;
}
#panel-parent .journey-steps button[aria-pressed="true"] {
  color:#146b60; background:#e3f1eb;
  box-shadow:inset 2px 2px 4px #9dbbae52,inset -2px -2px 5px #fff;
}
#panel-toys .input-mapping { background:#fffaf3; }
#panel-toys .game-loop li { border-top-color:#e6b88a; }
#panel-toys .prototype-context { border-left-color:#d77c3b; }
@media(max-width:700px) {
  .word-hero::before { width:28px; height:28px; right:16px; top:18px; }
}
@media(forced-colors:active) {
  .word-hero::before,.word-hero::after { display:none; }
  .case-tabs button[aria-selected="true"],.demo-tabs button[aria-selected="true"] { background:Highlight; color:HighlightText; box-shadow:none; }
  .case-tabs button[aria-selected="true"] .case-tab-number,.case-tabs button[aria-selected="true"] .case-tab-preview { color:HighlightText; }
}