:root {
  --ui-primary: #5b2bd4;
  --ui-primary-strong: #4820c4;
  --ui-primary-soft: #f3efff;
  --ui-ink: #17141d;
  --ui-muted: #706a77;
  --ui-border: #e8e4ec;
  --ui-border-strong: #d9d3df;
  --ui-surface: #fff;
  --ui-surface-soft: #faf9fc;
  --ui-success: #128745;
  --ui-success-soft: #eaf8ef;
  --ui-danger: #c92d3b;
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 18px;
  --ui-shadow-sm: 0 5px 18px rgba(37, 24, 59, .055);
  --ui-shadow-md: 0 12px 32px rgba(37, 24, 59, .085);
  --ui-focus: 0 0 0 3px rgba(91, 43, 212, .16);
  --purple: var(--ui-primary);
  --z-purple: var(--ui-primary);
  --portal-purple: var(--ui-primary);
  --account-purple: var(--ui-primary);
  --line: var(--ui-border);
  --z-line: var(--ui-border);
  --portal-line: var(--ui-border);
  --account-line: var(--ui-border);
}

html {
  color-scheme: light;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--ui-ink);
  font-feature-settings: "kern" 1, "liga" 1;
}

::selection { color: #fff; background: rgba(91, 43, 212, .86); }

:where(button, a, input, select, textarea) {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: 160ms;
  transition-timing-function: ease;
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 0;
  box-shadow: var(--ui-focus);
}

:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: .58;
}

:where(input, textarea)::placeholder { color: #9a949f; opacity: 1; }
:where(input, select, textarea) { caret-color: var(--ui-primary); }

body :is(
  .form-card,
  .detail-card,
  .soft-card,
  .review-item,
  .booking-review-card,
  .booking-artist-card,
  .account-identity,
  .account-preferences,
  .account-menu,
  .reservation-card,
  .portal-metric,
  .portal-card,
  .portal-chart-card,
  .portal-form-card,
  .portal-request,
  .artist-result-card,
  .artist-published-media-card,
  .empty-state
) {
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow-sm);
}

body :is(.primary-button, .wide-cta, .portal-primary, .booking-review-submit) {
  min-height: 48px;
  border-radius: 13px;
  background: linear-gradient(110deg, var(--ui-primary-strong), #6d36dc);
  box-shadow: 0 9px 22px rgba(82, 38, 203, .18);
  font-size: 14px;
  font-weight: 780;
}

body :is(.outline-cta, .outline-button) {
  border-color: #cfc5e9;
  border-radius: 13px;
  color: var(--ui-primary);
  background: #fff;
  box-shadow: none;
}

body :is(
  .field input,
  .field select,
  .field textarea,
  .portal-field input,
  .portal-field select,
  .portal-field textarea,
  .auth-field-shell
) {
  border-color: var(--ui-border-strong);
  border-radius: 12px;
  background: #fff;
}

body :is(
  .field input,
  .field select,
  .portal-field input,
  .portal-field select,
  .auth-field-shell
) { min-height: 46px; }

body :is(
  .field input,
  .field select,
  .field textarea,
  .portal-field input,
  .portal-field select,
  .portal-field textarea
):focus {
  border-color: #8868df;
  box-shadow: var(--ui-focus);
}

.app-global-header,
.app-context-bar,
.bottom-nav.app-bottom-nav {
  border-color: var(--ui-border);
  background-color: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}

.bottom-nav.app-bottom-nav { box-shadow: 0 -8px 24px rgba(36, 23, 55, .035); }
.bottom-nav.app-bottom-nav a { min-width: 0; }
.bottom-nav.app-bottom-nav a.active { color: var(--ui-primary); }

.internal-page .page-content,
.reservations-page .page-content,
.artist-portal-page .page-content {
  background: linear-gradient(180deg, #fff 0, #fdfcff 100%);
}

.internal-page :is(.section-intro, .page-intro) h1,
.notifications-title-row h1,
.reservation-directory-heading h1,
.portal-heading h1 {
  color: var(--ui-ink);
  font-weight: 800;
  letter-spacing: -.65px;
}

.internal-page :is(.section-intro, .page-intro) p,
.notifications-intro > p,
.reservation-directory-heading p,
.portal-heading p {
  color: var(--ui-muted);
  line-height: 1.45;
}

.empty-state {
  border-style: solid;
  border-radius: var(--ui-radius-lg);
  background: linear-gradient(145deg, #fff, #fbf9ff);
}

.empty-state span { color: var(--ui-primary); background: var(--ui-primary-soft); }

.notification-row,
.conversation-row,
.account-preference-row,
.account-menu-row { border-color: var(--ui-border); }

.notification-row.is-unread {
  border-color: #ded3f5;
  background: linear-gradient(110deg, #f8f5ff, #fff);
}

.account-preferences,
.account-menu {
  overflow: hidden;
  border-radius: var(--ui-radius-lg);
  background: #fff;
}

.account-preference-row,
.account-menu-row { min-height: 52px; }

.reservation-tabs,
.portal-tabs { border-color: var(--ui-border); background: #f1eef4; }

.reservation-tabs button.is-active,
.portal-tabs button.is-active {
  color: var(--ui-primary);
  background: #fff;
  box-shadow: 0 3px 10px rgba(38, 25, 58, .08);
}

.reservation-empty {
  border-style: solid;
  border-color: var(--ui-border);
  background: linear-gradient(145deg, #fff, #fbf9ff);
  box-shadow: var(--ui-shadow-sm);
}

.portal-kicker { color: var(--ui-primary); }
.portal-form-card { border-radius: var(--ui-radius-lg); }
.portal-form-card h2 { font-size: 16px; letter-spacing: -.25px; }
.portal-field label { color: #49434e; font-size: 11px; }
.portal-field input,
.portal-field textarea,
.portal-field select { padding: 11px 12px; font-size: 13px; }
.portal-duration-help,
.portal-field-help,
.portal-card-intro { color: var(--ui-muted); font-size: 10px; line-height: 1.45; }
.portal-media-upload strong { font-size: 12px; }
.portal-media-upload small,
.portal-media-upload label { font-size: 10px; }
.portal-quick strong { font-size: 13px; }
.portal-quick small,
.portal-booking-preview p,
.portal-slot small,
.portal-request-head p,
.portal-request-meta span { font-size: 10px; }
.portal-request-actions button,
.portal-request-actions a { min-height: 40px; font-size: 11px; }

.auth-form {
  border-color: var(--ui-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--ui-shadow-md);
}

.auth-heading h1 { letter-spacing: -.8px; }
.artist-published-media-card,
.artist-result-card,
.reservation-card { background: #fff; }

@media (hover: hover) {
  body :is(.primary-button, .wide-cta, .portal-primary, .booking-review-submit):not(:disabled):hover {
    box-shadow: 0 12px 28px rgba(82, 38, 203, .24);
    transform: translateY(-1px);
  }

  body :is(.outline-cta, .outline-button):not(:disabled):hover {
    border-color: #aa95de;
    background: #faf8ff;
  }

  .notification-row:hover,
  .conversation-row:hover,
  .account-preference-row:hover,
  .account-menu-row:hover { background: #faf9fc; }

  .artist-result-card:hover,
  .reservation-card:hover,
  .discover-artist-card:hover {
    border-color: #dcd4e7;
    box-shadow: var(--ui-shadow-md);
    transform: translateY(-2px);
  }
}

body :is(.primary-button, .wide-cta, .portal-primary, .booking-review-submit):not(:disabled):active,
.bottom-nav.app-bottom-nav a:active { transform: scale(.985); }

@media (max-width: 360px) {
  .internal-page .page-content,
  .reservations-page .page-content,
  .artist-portal-page .page-content { padding-inline: 12px; }

  .internal-page :is(.section-intro, .page-intro) h1,
  .notifications-title-row h1,
  .reservation-directory-heading h1,
  .portal-heading h1 { font-size: 23px; }

  .portal-form-card { padding: 13px; }
  .portal-form-grid { gap: 8px; }
  .portal-field input,
  .portal-field textarea,
  .portal-field select { padding-inline: 10px; font-size: 12px; }
  .portal-media-upload { padding: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  :where(button, a, input, select, textarea) { transition: none !important; }
}