:root {
  --alex-ink: #172036;
  --alex-indigo: #5b5bd6;
  --alex-indigo-dark: #4545b7;
  --alex-sun: #e2a93b;
  --alex-paper: #f5f3ec;
  --alex-mint: #dff3ea;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 8% 4%, rgba(91, 91, 214, 0.09), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(226, 169, 59, 0.1), transparent 24rem),
    var(--alex-paper);
  color: #48516b;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(91, 91, 214, 0.2);
  color: var(--alex-ink);
}

body > header {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(23, 32, 54, 0.08) !important;
  box-shadow: 0 10px 35px rgba(23, 32, 54, 0.06) !important;
  backdrop-filter: blur(18px);
}

.brand-mark {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 0.8rem;
  background: var(--alex-indigo);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  box-shadow: 0 8px 20px rgba(91, 91, 214, 0.28);
  transform: rotate(-3deg);
}

.brand-wordmark {
  color: var(--alex-ink);
  font-family: Inter, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.brand-wordmark span {
  color: var(--alex-indigo);
}

.brand-kicker {
  color: var(--alex-indigo);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rounded-3xl {
  border-radius: 1.5rem !important;
}

.bg-indigo-50 {
  background-color: #f0efff !important;
}

.text-indigo-300 {
  color: #b8b7ff !important;
}

.brand-card {
  border: 1px solid rgba(23, 32, 54, 0.09);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 55px rgba(23, 32, 54, 0.08);
  backdrop-filter: blur(10px);
}

.learning-note {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(91, 91, 214, 0.16);
  background: linear-gradient(135deg, rgba(91, 91, 214, 0.09), rgba(255, 255, 255, 0.9));
}

.learning-note::after {
  position: absolute;
  right: -2.5rem;
  bottom: -3.5rem;
  width: 9rem;
  height: 9rem;
  border: 1.4rem solid rgba(226, 169, 59, 0.13);
  border-radius: 9999px;
  content: "";
}

.soft-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
}

.bg-gradient-to-br.soft-grid {
  background-color: var(--alex-ink) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, var(--alex-ink), #273469) !important;
  background-size: 24px 24px, 24px 24px, auto;
}

.bg-brand-red {
  background-color: var(--alex-indigo) !important;
}

.bg-brand-dark {
  background-color: var(--alex-ink) !important;
}

.bg-brand-navy {
  background-color: #273469 !important;
}

.bg-brand-light {
  background-color: var(--alex-paper) !important;
}

.bg-brand-gold {
  background-color: var(--alex-sun) !important;
}

.text-brand-red {
  color: var(--alex-indigo) !important;
}

.text-brand-dark {
  color: var(--alex-ink) !important;
}

.text-brand-navy {
  color: #273469 !important;
}

.text-brand-gray {
  color: #48516b !important;
}

.text-brand-gold {
  color: var(--alex-sun) !important;
}

.border-brand-red {
  border-color: var(--alex-indigo) !important;
}

.border-brand-dark {
  border-color: var(--alex-ink) !important;
}

.border-brand-navy {
  border-color: #273469 !important;
}

.border-brand-gold {
  border-color: var(--alex-sun) !important;
}

.from-brand-dark {
  --tw-gradient-from: #172036 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(23 32 54 / 0) var(--tw-gradient-to-position) !important;
}

.to-brand-navy {
  --tw-gradient-to: #273469 var(--tw-gradient-to-position) !important;
}

.hover\:text-brand-red:hover {
  color: var(--alex-indigo) !important;
}

.hover\:border-brand-red:hover {
  border-color: var(--alex-indigo) !important;
}

.focus\:ring-brand-red:focus {
  --tw-ring-color: rgba(91, 91, 214, 0.42) !important;
}

.focus\:border-brand-red:focus {
  border-color: var(--alex-indigo) !important;
}

.bg-red-50 {
  background-color: #f0efff !important;
}

.text-red-300 {
  color: #c8c7ff !important;
}

.hover\:bg-red-50:hover {
  background-color: #f0efff !important;
}

.hover\:bg-red-700:hover,
.hover\:bg-red-800:hover {
  background-color: var(--alex-indigo-dark) !important;
}

.from-red-500 {
  --tw-gradient-from: #5b5bd6 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(91 91 214 / 0) var(--tw-gradient-to-position) !important;
}

.to-orange-400 {
  --tw-gradient-to: #e2a93b var(--tw-gradient-to-position) !important;
}

.article-body p {
  color: #3f485e !important;
}

.article-body h2,
.article-body h3 {
  color: var(--alex-ink) !important;
  letter-spacing: -0.025em;
}

a,
button,
label {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(91, 91, 214, 0.28);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}