/*
 * William Davidson Foundation theme overrides layered on top of the compiled
 * Tailwind CSS + DaisyUI bundle. The production CSS pipeline is npm-driven and
 * outputs app/static/css/dist.css.
 * This file supplies the "wdf" themes (light + dark) and app-specific tweaks.
 *
 * Brand palette: deep navy (#16324f), royal blue (#2f5ca3), cornflower (#4a7fd0)
 * on a clean white canvas — echoing the Foundation's star emblem and signature.
 *
 * Higher specificity html[data-theme=...] is used to ensure our theme
 * wins over DaisyUI's built-in :root defaults.
 */

/* ── WDF Light Theme ──────────────────────────────────────────────── */
html[data-theme="wdf"],
html[data-theme="wdf"] *::selection {
  color-scheme: light;
  /* Base: clean light greys */
  --color-base-100: oklch(100% 0 0);          /* white */
  --color-base-200: oklch(97% 0.004 250);     /* very light cool grey */
  --color-base-300: oklch(92% 0.008 250);     /* light cool grey */
  --color-base-content: oklch(27% 0.03 252);  /* deep navy slate */
  /* Primary: deep foundation navy */
  --color-primary: oklch(34% 0.06 252);       /* #16324f-ish */
  --color-primary-content: oklch(100% 0 0);
  /* Secondary: royal blue */
  --color-secondary: oklch(49% 0.12 258);     /* #2f5ca3 royal blue */
  --color-secondary-content: oklch(100% 0 0);
  /* Accent: cornflower blue */
  --color-accent: oklch(62% 0.13 256);        /* #4a7fd0 cornflower */
  --color-accent-content: oklch(100% 0 0);
  /* Neutral: deep navy */
  --color-neutral: oklch(23% 0.04 252);
  --color-neutral-content: oklch(95% 0 0);
  /* Status */
  --color-info: oklch(62% 0.14 235);
  --color-info-content: oklch(100% 0 0);
  --color-success: oklch(65% 0.18 155);
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(78% 0.16 75);
  --color-warning-content: oklch(25% 0.05 75);
  --color-error: oklch(58% 0.22 25);
  --color-error-content: oklch(100% 0 0);
  /* Radii & sizing */
  --radius-selector: 0.5rem;
  --radius-field: 0.375rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
  --surface-overlay: rgba(255, 255, 255, 0.76);
  --surface-elevated: rgba(255, 255, 255, 0.92);
  --surface-border: rgba(22, 50, 79, 0.12);
  --surface-border-strong: rgba(22, 50, 79, 0.18);
  --shadow-soft: 0 20px 44px -28px rgba(13, 35, 63, 0.22);
  --shadow-elevated: 0 30px 70px -34px rgba(13, 35, 63, 0.3);
  --shadow-glow: 0 0 0 4px rgba(22, 50, 79, 0.12);
}

/* ── WDF Dark Theme ───────────────────────────────────────────────── */
html[data-theme="wdf-dark"],
html[data-theme="wdf-dark"] *::selection {
  color-scheme: dark;
  /* Base: deep navy tones */
  --color-base-100: oklch(23% 0.03 252);      /* dark navy bg */
  --color-base-200: oklch(19% 0.03 252);      /* darker */
  --color-base-300: oklch(16% 0.025 252);     /* darkest */
  --color-base-content: oklch(92% 0.006 252);  /* off-white text */
  /* Primary: cornflower for dark mode */
  --color-primary: oklch(64% 0.13 256);
  --color-primary-content: oklch(100% 0 0);
  /* Secondary */
  --color-secondary: oklch(58% 0.12 258);
  --color-secondary-content: oklch(100% 0 0);
  /* Accent */
  --color-accent: oklch(70% 0.12 250);
  --color-accent-content: oklch(16% 0.04 252);
  /* Neutral */
  --color-neutral: oklch(15% 0.02 252);
  --color-neutral-content: oklch(90% 0.006 252);
  /* Status */
  --color-info: oklch(65% 0.14 235);
  --color-info-content: oklch(15% 0.05 235);
  --color-success: oklch(65% 0.16 155);
  --color-success-content: oklch(15% 0.05 155);
  --color-warning: oklch(78% 0.16 75);
  --color-warning-content: oklch(25% 0.05 75);
  --color-error: oklch(62% 0.2 25);
  --color-error-content: oklch(100% 0 0);
  /* Radii & sizing */
  --radius-selector: 0.5rem;
  --radius-field: 0.375rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
  --surface-overlay: rgba(20, 29, 46, 0.78);
  --surface-elevated: rgba(24, 35, 56, 0.94);
  --surface-border: rgba(141, 202, 255, 0.12);
  --surface-border-strong: rgba(141, 202, 255, 0.2);
  --shadow-soft: 0 24px 54px -30px rgba(0, 0, 0, 0.45);
  --shadow-elevated: 0 36px 80px -36px rgba(0, 0, 0, 0.56);
  --shadow-glow: 0 0 0 4px rgba(91, 163, 224, 0.16);
}

/* ── Global tweaks ────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(circle at top left, rgba(47, 92, 163, 0.08), transparent 32%),
    radial-gradient(circle at bottom right, rgba(22, 50, 79, 0.08), transparent 28%),
    linear-gradient(180deg, var(--color-base-200) 0%, var(--color-base-100) 38%, var(--color-base-200) 100%);
  color: var(--color-base-content);
}

[data-theme="wdf-dark"] body {
  background:
    radial-gradient(circle at top left, rgba(74, 127, 208, 0.14), transparent 28%),
    radial-gradient(circle at bottom right, rgba(15, 30, 55, 0.82), transparent 34%),
    linear-gradient(180deg, var(--color-base-200) 0%, var(--color-base-100) 42%, var(--color-base-200) 100%);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', 'Century Gothic', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
}

/* ── Focus states ─────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--color-primary) 85%, white);
  outline-offset: 3px;
  box-shadow: var(--shadow-glow);
}

/* ── Page entrance animation (initial load only, skipped on HTMX swaps) ── */
main {
  position: relative;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Only animate on first page load — HTMX swaps use view transitions instead */
html:not([data-htmx-boosted]) main {
  animation: fadeIn 0.35s ease-out;
}

/* ── Scroll-triggered animations ──────────────────────────────────── */
.animate-fade-up {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

html:not([data-htmx-boosted]) .animate-fade-up:not(.is-visible) {
  opacity: 0;
  transform: translateY(24px);
}

.animate-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger-children > *:nth-child(1) { transition-delay: 0s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.08s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.16s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.24s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.32s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.4s; }
.stagger-children > *:nth-child(7) { transition-delay: 0.48s; }
.stagger-children > *:nth-child(8) { transition-delay: 0.56s; }

/* ── Glass card ───────────────────────────────────────────────────── */
.glass-card {
  background: var(--surface-overlay);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
}
[data-theme="wdf-dark"] .glass-card {
  background: var(--surface-overlay);
  border: 1px solid var(--surface-border);
}

.surface-panel {
  background: var(--surface-overlay);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
}

.surface-elevated {
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-elevated);
}

.text-muted {
  color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
}

.text-soft {
  color: color-mix(in oklab, var(--color-base-content) 58%, transparent);
}

.text-hero-soft {
  color: rgba(255, 255, 255, 0.86);
}

.text-hero-muted {
  color: rgba(255, 255, 255, 0.72);
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100));
  color: color-mix(in oklab, var(--color-primary) 82%, var(--color-base-content));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-heading {
  max-width: 42rem;
  margin-inline: auto;
}

.section-heading p {
  margin-top: 0.9rem;
}

/* ── Card hover lift ──────────────────────────────────────────────── */
.card-hover {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.card-hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 75, 140, 0.08), transparent 45%, rgba(45, 143, 213, 0.1));
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.card-hover:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--surface-border-strong);
}

.card-hover:hover::before {
  opacity: 1;
}
[data-theme="wdf-dark"] .card-hover:hover {
  box-shadow: var(--shadow-elevated);
}

/* ── Gradient text ────────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, #16324f, #2f5ca3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="wdf-dark"] .gradient-text {
  background: linear-gradient(135deg, #6f9fe0, #a8c6ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Icon container ───────────────────────────────────────────────── */
.icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  flex-shrink: 0;
}
.icon-container-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  flex-shrink: 0;
}

/* Ensure Lucide icons are crisp and visible */
[data-lucide] {
  stroke-width: 1.75;
}
.icon-container [data-lucide],
.icon-container-lg [data-lucide] {
  stroke-width: 1.5;
}

/* ── Gradient hero ────────────────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(135deg, #0d233f 0%, #16324f 42%, #2f5ca3 100%);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -40px 80px rgba(6, 16, 30, 0.28);
}
.hero-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(74, 127, 208, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(126, 166, 224, 0.16) 0%, transparent 50%);
  pointer-events: none;
}

.hero-gradient::after {
  content: '';
  position: absolute;
  inset: auto -10% -35% auto;
  width: 28rem;
  height: 28rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 62%);
  pointer-events: none;
}

/* Wave divider — picks up the page background color */
.wave-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 0;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: 48px;
}

/* ── Stat card accent ─────────────────────────────────────────────── */
.stat-accent {
  border-left: 4px solid var(--color-primary);
  position: relative;
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-base-100) 94%, var(--color-primary) 6%), var(--surface-elevated));
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.stat-accent:hover {
  border-left-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

/* ── Navbar glass ─────────────────────────────────────────────────── */
.navbar-glass {
  backdrop-filter: blur(16px) saturate(1.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  background: rgba(13, 35, 63, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 32px -24px rgba(0, 0, 0, 0.45);
}
[data-theme="wdf-dark"] .navbar-glass {
  background: rgba(10, 20, 36, 0.95);
}

/* Active nav link underline indicator */
.nav-link {
  position: relative;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.2s ease, transform 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: #fff;
  transform: translateY(-1px);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.25s ease, left 0.25s ease;
  border-radius: 1px;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
  left: 0;
}

/* ── Chat bubble styles (agent page) ──────────────────────────────── */
.chat-container {
  max-height: 500px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.chat-bubble-assistant {
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-base-100) 70%, var(--color-secondary) 30%), var(--surface-overlay));
  border: 1px solid color-mix(in oklab, var(--color-secondary) 20%, var(--surface-border));
  border-radius: 1rem 1rem 1rem 0.25rem;
  box-shadow: var(--shadow-soft);
}

.message-surface {
  position: relative;
  overflow: hidden;
}

.message-surface::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 45%);
  pointer-events: none;
}

/* Typing indicator */
.typing-indicator {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}
.typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.4;
  animation: typingDot 1.4s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.4; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.2); }
}

/* ── Brand logo on dark surfaces ──────────────────────────────────── */
/* The official WDF logo is single-color blue artwork on a transparent
   background. On the dark navy navbar/footer we render it as a crisp
   white silhouette for contrast, preserving the exact logo shape. */
.brand-logo-on-dark {
  filter: brightness(0) invert(1);
}

/* ── Tab styles ───────────────────────────────────────────────────── */
.tab-custom {
  position: relative;
  padding: 0.8rem 1.15rem;
  font-weight: 600;
  border-radius: 0.85rem 0.85rem 0 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab-custom::after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.2rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  opacity: 0;
  transform: scaleX(0.65);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tab-custom:hover {
  transform: translateY(-1px);
}
.tab-custom.tab-active {
  background: var(--surface-elevated);
  border-bottom-color: transparent;
  color: var(--color-primary);
  box-shadow: var(--shadow-soft);
}

.tab-custom.tab-active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ── HTMX loading indicator ──────────────────────────────────────── */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator {
  display: inline-flex;
}

/* Keep HTMX swaps simple: swap content without additional page-wide effects. */

.reveal-on-swap {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.reveal-on-swap.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Footer gradient border ───────────────────────────────────────── */
.footer-gradient-border {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #0d233f, #2f5ca3, #6f9fe0) 1;
}

/* ── Auth page decorative background ──────────────────────────────── */
.auth-bg {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(26, 75, 140, 0.1) 0%, transparent 56%),
    radial-gradient(ellipse at 84% 100%, rgba(45, 143, 213, 0.08) 0%, transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)),
    var(--color-base-200);
}
[data-theme="wdf-dark"] .auth-bg {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(74, 127, 208, 0.14) 0%, transparent 52%),
    radial-gradient(ellipse at 82% 100%, rgba(126, 166, 224, 0.08) 0%, transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    var(--color-base-200);
}

/* ── Pulse glow for CTA buttons ───────────────────────────────────── */
.btn-glow {
  position: relative;
}
.btn-glow::after {
  content: '';
  position: absolute;

.btn-lift {
  box-shadow: var(--shadow-soft);
}

.btn-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

.btn-lift:active {
  transform: translateY(0);
}

.btn-outline-soft {
  border-color: color-mix(in oklab, var(--color-base-content) 12%, transparent);
  background: color-mix(in oklab, var(--color-base-100) 88%, transparent);
}

.btn-outline-soft:hover {
  border-color: color-mix(in oklab, var(--color-primary) 35%, transparent);
  background: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100));
}

.btn:not(:disabled):not(.btn-ghost) {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn:not(:disabled):not(.btn-ghost):hover {
  transform: translateY(-1px);
}

.btn:disabled,
.btn[disabled] {
  transform: none;
  box-shadow: none;
  filter: saturate(0.85);
  cursor: not-allowed;
}

.btn-ghost {
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-ghost:hover {
  transform: translateY(-1px);
}
  inset: -2px;
  border-radius: inherit;
  background: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  filter: blur(12px);
  z-index: -1;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -18px rgba(26, 75, 140, 0.45);
  border-color: color-mix(in oklab, var(--color-primary) 34%, var(--surface-border));
}

.input-shell {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--surface-border);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--color-base-100) 90%, var(--color-base-200));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.input-shell:focus-within {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--color-primary) 55%, var(--surface-border));
  box-shadow: var(--shadow-glow), var(--shadow-soft);
  background: var(--surface-elevated);
}

.input-shell-secondary:focus-within {
  border-color: color-mix(in oklab, var(--color-secondary) 55%, var(--surface-border));
  box-shadow: 0 0 0 4px rgba(45, 143, 213, 0.14), var(--shadow-soft);
}

.input-shell-accent:focus-within {
  border-color: color-mix(in oklab, var(--color-accent) 52%, var(--surface-border));
  box-shadow: 0 0 0 4px rgba(90, 186, 224, 0.16), var(--shadow-soft);
}

.input-shell-warning:focus-within {
  border-color: color-mix(in oklab, var(--color-warning) 52%, var(--surface-border));
  box-shadow: 0 0 0 4px rgba(255, 186, 50, 0.14), var(--shadow-soft);
}

.input-shell-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.95rem;
  color: color-mix(in oklab, var(--color-base-content) 46%, transparent);
  border-right: 1px solid var(--surface-border);
}

.input-shell:focus-within .input-shell-icon {
  color: var(--color-primary);
}

.input-shell-secondary:focus-within .input-shell-icon {
  color: var(--color-secondary);
}

.input-shell-accent:focus-within .input-shell-icon {
  color: var(--color-accent);
}

.input-shell-warning:focus-within .input-shell-icon {
  color: var(--color-warning);
}

.input-shell .input,
.input-shell .textarea {
  flex: 1;
  border: 0;
  box-shadow: none;
  background: transparent;
  min-height: 100%;
}

.input-shell .input:focus,
.input-shell .textarea:focus {
  outline: none;
  box-shadow: none;
}

.input,
.textarea,
.select {
  background: color-mix(in oklab, var(--color-base-100) 94%, var(--color-base-200));
  border-color: var(--surface-border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--surface-border-strong);
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: color-mix(in oklab, var(--color-primary) 55%, var(--surface-border));
  box-shadow: var(--shadow-glow);
  background: var(--surface-elevated);
}

.helper-note {
  font-size: 0.78rem;
  color: color-mix(in oklab, var(--color-base-content) 52%, transparent);
}

.status-card,
.response-card,
.empty-state-card {
  position: relative;
  overflow: hidden;
  background: var(--surface-elevated);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
}

.status-card::before,
.response-card::before,
.empty-state-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(45, 143, 213, 0.08), transparent 42%, rgba(90, 186, 224, 0.08));
  pointer-events: none;
}

.alert-soft {
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-soft);
}

.alert-soft-error {
  background: color-mix(in oklab, var(--color-error) 11%, var(--surface-elevated));
  border-color: color-mix(in oklab, var(--color-error) 30%, var(--surface-border));
}

.alert-soft-success {
  background: color-mix(in oklab, var(--color-success) 11%, var(--surface-elevated));
  border-color: color-mix(in oklab, var(--color-success) 28%, var(--surface-border));
}

.alert-soft-info {
  background: color-mix(in oklab, var(--color-info) 11%, var(--surface-elevated));
  border-color: color-mix(in oklab, var(--color-info) 28%, var(--surface-border));
}
.btn-glow:hover::after {
  opacity: 0.4;
}

/* ── Badge hover ──────────────────────────────────────────────────── */
.badge-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .card-hover:hover,
  .btn:hover,
  .tab-custom:hover,
  .stat-accent:hover,
  .input-shell:focus-within {
    transform: none;
  }
}
}
.badge-hover:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(26, 75, 140, 0.2);
}

/* ── Theme transition (scoped to theme toggle, not every DOM swap) ── */
html[data-theme] {
  transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme] body,
html[data-theme] .navbar-glass,
html[data-theme] .glass-card,
html[data-theme] .surface-panel,
html[data-theme] .surface-elevated {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ── Prose / Markdown rendering ──────────────────────────────────── */
.prose {
  line-height: 1.7;
  color: var(--color-base-content);
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-weight: 700;
  margin-top: 1.25em;
  margin-bottom: 0.5em;
  color: var(--color-base-content);
}
.prose h1 { font-size: 1.5em; }
.prose h2 { font-size: 1.25em; }
.prose h3 { font-size: 1.125em; }
.prose p { margin-bottom: 0.75em; }
.prose ul, .prose ol { margin-bottom: 0.75em; padding-left: 1.5em; }
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li { margin-bottom: 0.25em; }
.prose code {
  background: var(--color-base-300);
  padding: 0.125em 0.375em;
  border-radius: 0.25rem;
  font-size: 0.875em;
}
.prose pre {
  background: var(--color-neutral);
  color: var(--color-neutral-content);
  padding: 1em;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin-bottom: 1em;
}
.prose pre code {
  background: none;
  padding: 0;
  font-size: 0.85em;
}
.prose blockquote {
  border-left: 3px solid var(--color-secondary);
  padding-left: 1em;
  margin-bottom: 0.75em;
  color: var(--color-base-content);
  opacity: 0.85;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}
.prose th, .prose td {
  border: 1px solid var(--color-base-300);
  padding: 0.5em 0.75em;
  text-align: left;
}
.prose th { font-weight: 600; background: var(--color-base-200); }
.prose strong { font-weight: 700; }
.prose a { color: var(--color-secondary); text-decoration: underline; }
.prose-sm { font-size: 0.9rem; }
.prose-invert { color: var(--color-base-content); }