/* enhance.css - additive visual polish overlay; loaded after styles.css; delete its <link> to fully revert. Keeps original teal/brown/blue palette. */
:root {
  --enh-shadow-sm: 0 2px 8px rgba(15, 118, 110, 0.07);
  --enh-shadow-md: 0 12px 30px rgba(30, 37, 43, 0.10);
  --enh-shadow-lg: 0 22px 48px rgba(30, 37, 43, 0.14);
  --enh-ring: rgba(15, 118, 110, 0.16);
  --enh-radius: 14px;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

button, .file-button, .nav-tab, .section-jump-button,
.card, .panel, .metric, .quote-panel {
  transition: transform 0.18s ease, box-shadow 0.22s ease,
    background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.brand-mark {
  background: linear-gradient(135deg, #14b8a6 0%, #0f766e 60%, #115e59 100%);
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.35);
  letter-spacing: 0.5px;
}

.nav-tab { border-radius: 9px; }
.nav-tab:hover { transform: translateX(3px); }
.nav-tab.is-active {
  background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.30);
}

.topbar {
  backdrop-filter: saturate(1.1);
  box-shadow: 0 1px 0 var(--line), 0 8px 20px -16px rgba(30, 37, 43, 0.35);
}
.eyebrow { letter-spacing: 0.4px; }

button.primary, .file-button { border-radius: 10px; }
button.primary:hover, .file-button:hover {
  transform: translateY(-2px); box-shadow: var(--enh-shadow-md); filter: saturate(1.05);
}
button.secondary:hover { transform: translateY(-1px); box-shadow: var(--enh-shadow-sm); }
button:active { transform: translateY(0); }
button:focus-visible, .file-button:focus-within, .nav-tab:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--enh-ring);
}

.card, .panel, .metric, .quote-panel { border-radius: var(--enh-radius); }
.card:hover, .panel:hover, .metric:hover {
  transform: translateY(-3px); box-shadow: var(--enh-shadow-md); border-color: var(--enh-ring);
}

.metric strong {
  background: linear-gradient(135deg, #0f766e 0%, #2457a6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.section-jump-button:hover {
  transform: translateY(-3px); box-shadow: var(--enh-shadow-md); border-color: var(--enh-ring);
}

.codex-commerce-hero { box-shadow: var(--enh-shadow-lg); border-radius: 18px; overflow: hidden; }
.codex-visual-card, .codex-mini-card {
  border-radius: var(--enh-radius); overflow: hidden; box-shadow: var(--enh-shadow-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.codex-visual-card:hover, .codex-mini-card:hover {
  transform: translateY(-4px) scale(1.01); box-shadow: var(--enh-shadow-lg);
}
.codex-visual-card img, .codex-mini-card img { transition: transform 0.4s ease; }
.codex-visual-card:hover img, .codex-mini-card:hover img { transform: scale(1.04); }
.codex-hero-metrics strong {
  background: linear-gradient(135deg, #0f766e 0%, #2457a6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.codex-flow-steps article {
  border-radius: var(--enh-radius); transition: transform 0.2s ease, box-shadow 0.22s ease;
}
.codex-flow-steps article:hover { transform: translateY(-4px); box-shadow: var(--enh-shadow-lg); }

.view img:not(.codex-visual-card img):not(.codex-mini-card img) { border-radius: 10px; }

.workspace::-webkit-scrollbar { width: 10px; }
.workspace::-webkit-scrollbar-thumb { background: rgba(15, 118, 110, 0.35); border-radius: 999px; }
.workspace::-webkit-scrollbar-thumb:hover { background: rgba(15, 118, 110, 0.55); }

.view.is-active { animation: enhFadeIn 0.32s ease both; }
@keyframes enhFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, .view.is-active { animation: none !important; transition: none !important; }
}