@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap");

:root {
  --brand-ink: #202128;
  --brand-lilac: #b49ae8;
  --brand-lilac-soft: #f2edf9;
  --brand-lilac-pale: #faf8fd;
  --accent: #6c4b9e;
  --accent-dark: #523678;
  --accent-soft: #f0eafa;
  --success: #6c4b9e;
  --brand-gradient-page:
    radial-gradient(circle at top left, rgba(180, 154, 232, 0.24), transparent 34rem),
    linear-gradient(180deg, #fbfafd 0%, #f7f5fa 100%);
  --brand-gradient-surface: linear-gradient(135deg, #f2edf9 0%, #fdfcff 100%);
  --brand-gradient-surface-soft: linear-gradient(135deg, #eee7f7 0%, #faf8fd 100%);
  --brand-gradient-action: linear-gradient(135deg, #8062ad 0%, #68478f 100%);
  --brand-gradient-action-hover: linear-gradient(135deg, #705299 0%, #563875 100%);
}

body,
button,
input,
select,
textarea {
  font-family: "Work Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

::selection {
  background: rgba(180, 154, 232, 0.38);
}

:where(button, a, input, select, textarea):focus-visible {
  outline-color: var(--brand-lilac);
}

.sonare-brand {
  gap: 0.58rem;
  color: var(--brand-ink);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.sonare-brand:hover {
  color: var(--accent-dark);
}

.sonare-brand:focus-visible {
  outline-color: rgba(180, 154, 232, 0.5);
}

.sonare-brand-mark {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.sonare-wordmark {
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.sonare-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.66rem;
  color: var(--brand-ink);
}

.sonare-lockup-mark {
  display: block;
  width: 46px;
  height: 46px;
}

.sonare-lockup-word {
  font-size: 1.58rem;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
}

.sonare-lockup--compact {
  gap: 0.46rem;
}

.sonare-lockup--compact .sonare-lockup-mark {
  width: 32px;
  height: 32px;
}

.sonare-lockup--compact .sonare-lockup-word {
  font-size: 1.1rem;
}

.login-brand .sonare-lockup,
.student-portal-card > .sonare-lockup {
  margin-bottom: 1.35rem;
}

.student-portal-hero .sonare-lockup {
  margin-bottom: 0.8rem;
}

.eyebrow {
  color: var(--accent);
}

.topbar .tab.active {
  border-color: rgba(108, 75, 158, 0.18);
}

body:not(.login-page):not(.student-portal-page) {
  background: var(--brand-gradient-page);
}

.topbar {
  background: linear-gradient(135deg, rgba(246, 242, 251, 0.96), rgba(255, 255, 255, 0.96));
}

.button:not(.button-secondary):not(.button-danger):not(.piece-delete-button),
.complete-quest-button {
  border-color: transparent;
  background: var(--brand-gradient-action);
  color: #fff;
}

.button:not(.button-secondary):not(.button-danger):not(.piece-delete-button):hover,
.complete-quest-button:hover {
  background: var(--brand-gradient-action-hover);
}

.complete-quest-button.is-complete {
  background: #604084;
}

.login-page {
  background: var(--brand-gradient-page);
}

.login-card {
  border-color: #e6def1;
  box-shadow: 0 20px 55px rgba(65, 43, 91, 0.1);
}

.student-portal-page {
  background:
    radial-gradient(circle at top left, rgba(180, 154, 232, 0.3), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(180, 154, 232, 0.14), transparent 28rem),
    linear-gradient(180deg, #fbfafd 0%, #f7f5fa 100%);
}

.student-portal-card {
  border-color: #e4dced;
  background: rgba(255, 254, 252, 0.96);
  box-shadow: 0 22px 60px rgba(65, 43, 91, 0.13);
}

.student-portal-card h1,
.student-pet-copy h2,
.student-practice-session h2,
.student-piece-card h2 {
  color: var(--brand-ink);
}

.student-portal-card input,
.student-portal-card select,
.student-account-button,
.student-account-dropdown {
  border-color: #ded5e9;
}

.student-account-button {
  color: var(--brand-ink);
}

.student-account-avatar,
.student-quest-xp {
  background: var(--brand-lilac-soft);
}

.student-level-card {
  border-color: #ded3eb;
  background: var(--brand-gradient-surface);
}

.student-level-card span,
.student-pet-kicker,
.student-quest-kicker,
.student-quest-progress-row strong {
  color: var(--accent);
}

.student-level-track span,
.student-quest-progress span {
  background: linear-gradient(90deg, var(--brand-lilac), #8060ae);
}

.student-pet-stage {
  border-color: #d9cceb;
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.86) 0 8%, transparent 8.5%),
    radial-gradient(circle at 74% 26%, rgba(255, 255, 255, 0.58) 0 5%, transparent 5.5%),
    var(--brand-gradient-surface-soft);
  box-shadow: inset 0 -36px 70px rgba(108, 75, 158, 0.07);
}

.student-pet-stage::after {
  background: rgba(180, 154, 232, 0.2);
}

.student-pet-note {
  color: var(--accent);
}

.student-avatar-option:hover,
.student-avatar-option.selected,
.student-pet-accessory-option.selected {
  border-color: var(--brand-lilac);
  background: var(--brand-lilac-soft);
  box-shadow: 0 0 0 2px rgba(180, 154, 232, 0.18);
}

.practice-check.complete,
.student-piece-card.quest-complete {
  border-color: #d8cae8;
  background: var(--brand-gradient-surface-soft);
}

/* Replace the original green product accents with the Sonare lilac system. */
.student-card-footer,
.student-modal-card > .card-heading,
.student-modal-card > .card-heading::before,
.student-workspace .student-modal-card > .card-heading.student-editor-header,
.student-workspace .student-modal-card > .card-heading.student-editor-header::before,
.statistics-disclosure summary,
.student-avatar-selector,
.student-practice-session {
  background: var(--brand-gradient-surface) !important;
}

.student-workspace-sidebar-v2,
.student-context-sidebar {
  background: var(--brand-lilac-pale);
}

.student-sidebar-v2-icon,
.student-menu-icon {
  background: rgba(180, 154, 232, 0.18);
}

.student-context-sidebar .student-edit-tab.active .student-menu-icon,
.student-sidebar-v2-link.active .student-sidebar-v2-icon {
  background: var(--brand-lilac-soft);
}

.piece-admin-card.is-dragging {
  box-shadow: inset 0 0 0 2px rgba(180, 154, 232, 0.34);
}

.schedule-panel-current .schedule-dot,
.schedule-panel-upcoming .schedule-dot {
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(180, 154, 232, 0.2);
}

.schedule-student-card,
.schedule-student-card.is-current,
.schedule-student-card.is-upcoming {
  border-color: rgba(180, 154, 232, 0.3);
  background: var(--brand-gradient-surface);
}

.schedule-progress-copy strong {
  color: var(--accent-dark);
}

.schedule-progress-track {
  background: rgba(180, 154, 232, 0.2);
}

.schedule-progress-track span {
  background: linear-gradient(90deg, var(--brand-lilac), var(--accent));
}

.student-pet-speech {
  border-color: rgba(108, 75, 158, 0.2);
  color: #4d4357;
}

.student-pet-avatar {
  filter: drop-shadow(0 12px 11px rgba(65, 43, 91, 0.12));
}

.student-pet-accessory {
  filter: drop-shadow(0 4px 3px rgba(65, 43, 91, 0.16));
}

.student-pet-shadow {
  background: rgba(65, 43, 91, 0.14);
}

.student-pet-stage[data-reaction="week"] {
  box-shadow: 0 0 0 5px rgba(180, 154, 232, 0.18), inset 0 -36px 70px rgba(108, 75, 158, 0.07);
}

.pet-journey-step {
  border-color: rgba(180, 154, 232, 0.35);
  color: var(--muted);
}

.pet-journey-step.complete,
.pet-journey-step.current {
  border-color: #d5c6e7;
  background: var(--brand-lilac-soft);
  color: var(--accent-dark);
}

.pet-journey-step.current {
  box-shadow: 0 0 0 3px rgba(180, 154, 232, 0.2);
}

.student-practice-session,
.student-avatar-selector,
.student-account-button,
.student-account-dropdown,
.student-avatar-option,
.student-pet-accessory-option,
.practice-check,
.student-piece-card,
.student-piece-empty,
.student-award-card {
  border-color: #e0d7ea;
}

.student-practice-session {
  box-shadow: 0 10px 28px rgba(65, 43, 91, 0.08);
}

.student-account-dropdown {
  box-shadow: 0 18px 45px rgba(65, 43, 91, 0.14);
}

.student-account-summary,
.student-pet-settings-form {
  border-color: #e7e0ee;
}

.student-avatar-option,
.student-pet-accessory-option,
.student-pet-settings-form select {
  color: #574f60;
}

.student-pet-accessory-fieldset legend {
  color: var(--brand-ink);
}

.student-pet-accessory-fieldset p,
.student-login-help,
.student-level-card small {
  color: var(--muted);
}

.practice-check.complete,
.student-piece-card.quest-complete,
.student-quest-xp,
.student-quest-progress-row strong {
  color: var(--accent-dark);
}

html[data-theme="dark"] {
  --accent: #b49ae8 !important;
  --accent-dark: #c9b5ed !important;
  --accent-soft: rgba(180, 154, 232, 0.16) !important;
  --success: #b49ae8 !important;
}

html[data-theme="dark"] .sonare-brand-mark {
  content: url("sonare-mark-dark.svg");
}

html[data-theme="dark"] .sonare-brand,
html[data-theme="dark"] .sonare-lockup {
  color: #fff;
}

.portal-switch-link {
  display: block;
  width: fit-content;
  margin: 1rem auto 0;
  padding: 0.45rem 0.7rem;
  border: 1px solid #e0d7ea;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.45);
  color: #685a75;
  font-size: 0.78rem;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}

.portal-switch-link:hover,
.portal-switch-link:focus-visible {
  border-color: #b49ae8;
  background: rgba(180, 154, 232, 0.08);
  color: #4f3e63;
}

.piece-start-date {
  margin: 0.25rem 0 0 !important;
  color: var(--muted);
  font-size: 0.8rem;
}

#studentLoginHistory {
  margin-top: 1.5rem;
  padding: clamp(1rem, 2vw, 1.5rem);
}

#studentLoginHistory > h3 {
  margin: 0 0 0.5rem;
}

#studentLoginHistory [data-login-entries] {
  padding: 0.5rem 0;
}

#studentLoginHistory [data-login-entries] > p {
  margin: 0;
  padding: 0.7rem 0;
}

#studentLoginHistory [data-login-entries] > p + p {
  border-top: 1px solid var(--border);
}

#studentLoginHistory > .form-actions {
  margin-top: 0.75rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 680px) {
  .sonare-wordmark {
    font-size: 1.16rem;
  }
}