@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --iag-paper: #f0f1ee;
  --iag-ink: #1e211f;
  --iag-ink-soft: rgba(30, 33, 31, 0.62);
  --iag-rule: rgba(30, 33, 31, 0.14);
  --iag-panel: #ffffff;
  --iag-mauve: #dacde2;
  --iag-mauve-deep: #2e2338;
  --iag-mauve-line: #8e77a0;
  --iag-mauve-wash: #eae3ee;
  --iag-ease: cubic-bezier(0.16, 0.8, 0.24, 1);
}

html {
  background: var(--iag-paper);
}

body,
.font-body,
.font-headline,
.font-label {
  font-family: "Archivo", sans-serif !important;
}

body {
  background: var(--iag-paper) !important;
  color: var(--iag-ink) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
  font-family: "Archivo", sans-serif !important;
  font-stretch: 106%;
  letter-spacing: -0.025em;
}

.font-mono,
.uppercase {
  font-family: "IBM Plex Mono", monospace !important;
}

nav,
footer {
  border-color: var(--iag-rule) !important;
}

nav {
  background: rgba(240, 241, 238, 0.94) !important;
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 60;
}

footer {
  background: var(--iag-panel) !important;
}

/* Neutral surfaces and type */
.bg-white { background-color: var(--iag-panel) !important; }
.bg-slate-50,
.bg-surface,
.bg-background { background-color: var(--iag-paper) !important; }
.bg-slate-100,
.bg-slate-200,
.bg-surface-container,
.bg-surface-container-low,
.bg-surface-container-high,
.bg-surface-container-highest { background-color: var(--iag-mauve-wash) !important; }
.bg-slate-800 { background-color: #403748 !important; }
.bg-slate-900,
.bg-primary-container { background-color: var(--iag-mauve-deep) !important; }
.bg-blue-800,
.bg-blue-900 { background-color: #5f4c6b !important; }

.text-slate-900,
.text-slate-800,
.text-on-surface,
.text-on-background { color: var(--iag-ink) !important; }
.text-slate-700,
.text-slate-600,
.text-slate-500,
.text-slate-400,
.text-slate-300,
.text-on-surface-variant { color: var(--iag-ink-soft) !important; }

.border-slate-50,
.border-slate-100,
.border-slate-200,
.border-slate-300,
.border-outline,
.border-outline-variant { border-color: var(--iag-rule) !important; }

/* Translate every former blue/green/orange accent into the IAG tile palette. */
.text-blue-400,
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-blue-900,
.text-primary,
.text-emerald-300,
.text-emerald-400,
.text-emerald-500,
.text-emerald-600,
.text-emerald-700,
.text-emerald-800,
.text-emerald-900,
.text-orange-300,
.text-orange-400,
.text-orange-500,
.text-orange-600,
.text-orange-700,
.text-orange-800,
.text-orange-900,
.text-red-500,
.text-red-600,
.text-red-700,
.text-on-tertiary-container { color: var(--iag-mauve-line) !important; }

.bg-blue-50,
.bg-blue-100,
.bg-blue-200,
.bg-emerald-50,
.bg-emerald-100,
.bg-emerald-200,
.bg-orange-50,
.bg-orange-100,
.bg-orange-200,
.bg-red-50,
.bg-red-100,
.bg-red-200,
.bg-secondary-container { background-color: var(--iag-mauve) !important; }

.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-primary,
.bg-emerald-500,
.bg-emerald-600,
.bg-emerald-700,
.bg-emerald-800,
.bg-emerald-900,
.bg-secondary,
.bg-orange-500,
.bg-orange-600,
.bg-orange-700,
.bg-orange-800,
.bg-orange-900,
.bg-red-500,
.bg-red-600,
.bg-red-700,
.bg-tertiary-container { background-color: var(--iag-mauve-deep) !important; }

.border-blue-200,
.border-blue-300,
.border-blue-500,
.border-blue-600,
.border-emerald-200,
.border-emerald-500,
.border-emerald-600,
.border-orange-200,
.border-orange-500,
.border-orange-600,
.border-red-200,
.border-red-500,
.border-red-600 { border-color: var(--iag-mauve-line) !important; }

[class*="bg-emerald-"][class*="/"],
[class*="bg-orange-"][class*="/"],
[class*="bg-blue-"][class*="/"] {
  background-color: rgba(218, 205, 226, 0.18) !important;
}

.hover\:bg-blue-50:hover,
.hover\:bg-slate-50:hover,
.hover\:bg-emerald-50:hover,
.hover\:bg-orange-50:hover { background-color: var(--iag-mauve-wash) !important; }
.hover\:bg-blue-500:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-emerald-600:hover,
.hover\:bg-emerald-700:hover,
.hover\:bg-orange-600:hover,
.hover\:bg-orange-700:hover { background-color: #493755 !important; }
.hover\:text-blue-600:hover,
.hover\:text-blue-700:hover,
.hover\:text-blue-800:hover,
.hover\:text-emerald-600:hover,
.hover\:text-emerald-700:hover,
.hover\:text-orange-600:hover,
.hover\:text-orange-700:hover,
.hover\:text-slate-900:hover { color: var(--iag-mauve-deep) !important; }

/* Preserve section geometry while replacing the previous blue hero language. */
[class*="bg-gradient-to-"][class*="from-slate-900"],
[class*="bg-gradient-to-"][class*="from-blue-"],
[class*="bg-gradient-to-"][class*="via-blue-"],
[class*="bg-gradient-to-"][class*="from-emerald-"],
[class*="bg-gradient-to-"][class*="via-emerald-"],
[class*="bg-gradient-to-"][class*="from-green-"],
[class*="bg-gradient-to-"][class*="via-green-"],
[class*="bg-gradient-to-"][class*="from-orange-"],
[class*="bg-gradient-to-"][class*="via-orange-"] {
  background-image: linear-gradient(135deg, var(--iag-mauve-deep), #4b3b57 58%, #6f5a7d) !important;
}

.from-slate-900 { --tw-gradient-from: var(--iag-mauve-deep) var(--tw-gradient-from-position) !important; }
.via-slate-800 { --tw-gradient-to: rgba(64, 55, 72, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), #403748 var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.to-blue-900 { --tw-gradient-to: #675473 var(--tw-gradient-to-position) !important; }

.bg-slate-900 .text-slate-300,
.bg-slate-900 .text-slate-400,
.bg-slate-900 .text-slate-500,
.bg-blue-800 .text-slate-300,
.bg-blue-800 .text-slate-400,
.bg-blue-800 .text-slate-500,
.bg-blue-900 .text-slate-300,
.bg-blue-900 .text-slate-400,
.bg-blue-900 .text-slate-500,
[class*="from-slate-900"] .text-slate-300,
[class*="from-slate-900"] .text-slate-400,
[class*="from-slate-900"] .text-slate-500,
[class*="from-emerald-"] .text-emerald-100,
[class*="from-emerald-"] .text-emerald-200,
[class*="from-emerald-"] .text-emerald-300,
[class*="from-orange-"] .text-orange-100,
[class*="from-orange-"] .text-orange-200,
[class*="from-orange-"] .text-orange-300 {
  color: rgba(230, 220, 236, 0.78) !important;
}

[class*="bg-gradient-to-"][class*="from-emerald-"] h1,
[class*="bg-gradient-to-"][class*="from-orange-"] h1 {
  color: #ffffff !important;
}

/* Cards keep their size and grid placement, but adopt the tile's sharp construction. */
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
input,
textarea,
select,
button:not(.rounded-full) {
  border-radius: 0 !important;
}

.shadow-sm,
.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
  box-shadow: 0 24px 48px -38px rgba(46, 35, 56, 0.62) !important;
}

a,
button,
.phase-card,
.blog-card {
  transition-duration: 0.5s !important;
  transition-timing-function: var(--iag-ease) !important;
}

.phase-card:hover,
.blog-card:hover {
  border-color: var(--iag-mauve-line) !important;
  box-shadow: 0 28px 48px -38px rgba(46, 35, 56, 0.72) !important;
}

/* Article chrome follows the theme; illustrations remain untouched as content. */
.prose { color: var(--iag-ink-soft) !important; }
.prose h2,
.prose strong { color: var(--iag-ink) !important; }
.prose h2 { border-color: var(--iag-rule) !important; }
.prose h3,
.prose a,
.glossary-term { color: var(--iag-mauve-line) !important; }
.prose li::marker { color: var(--iag-mauve-line) !important; }
.prose blockquote {
  border-color: var(--iag-mauve-line) !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, rgba(218, 205, 226, 0.72), rgba(240, 241, 238, 0.92)) !important;
  color: var(--iag-ink) !important;
}
.blog-card-graphic,
.graphic-placeholder,
.iag-blog-graphic,
.iag-blog-graphic-thumb { background-color: var(--iag-paper) !important; }

/* The ticker DOM and its 60s animation remain intact; only its edge color changes. */
.logo-ticker::before {
  background: linear-gradient(to right, var(--iag-panel), transparent) !important;
}
.logo-ticker::after {
  background: linear-gradient(to left, var(--iag-panel), transparent) !important;
}

::selection {
  background: var(--iag-mauve);
  color: var(--iag-mauve-deep);
}

:focus-visible {
  outline-color: var(--iag-mauve-line) !important;
}

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