/* ============================================================
   Answers, etc. — Shared Styles
   Included on every page. Page-specific styles remain inline.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

/* Base typography */
body {
    font-family: 'Inter', system-ui, sans-serif;
}

.font-display {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
}

/* Navigation */
.nav-scrolled {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 0 rgba(15, 23, 42, 0.03);
}

.nav-link {
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #39b7e0;
}

/* Demo modal entrance animation — used on every page */
.demo-modal {
    animation: modalEnter 0.2s ease-out forwards;
}

@keyframes modalEnter {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ============================================================
   Brand color — logo blue (#39b7e0) replaces Tailwind teal
   Overrides every teal-* class used across the site.
   To change the brand color, update the variables below.
   ============================================================ */
:root {
    --brand-50:  #eaf6fc;
    --brand-100: #d0edf9;
    --brand-200: #a1ddf3;
    --brand-300: #6ecce8;
    --brand-400: #39b7e0;
    --brand-500: #39b7e0;
    --brand-600: #39b7e0;
    --brand-700: #2a9ec3;
    --brand-800: #1e7a97;
    --brand-900: #155f74;
}

/* Text */
.text-teal-300              { color: var(--brand-300) !important; }
.text-teal-400              { color: var(--brand-400) !important; }
.text-teal-500              { color: var(--brand-500) !important; }
.text-teal-600              { color: var(--brand-600) !important; }
.text-teal-700              { color: var(--brand-700) !important; }
.hover\:text-teal-400:hover { color: var(--brand-400) !important; }
.hover\:text-teal-600:hover { color: var(--brand-600) !important; }
.hover\:text-teal-700:hover { color: var(--brand-700) !important; }

/* Background */
.bg-teal-50                  { background-color: var(--brand-50)  !important; }
.bg-teal-100                 { background-color: var(--brand-100) !important; }
.bg-teal-400                 { background-color: var(--brand-400) !important; }
.bg-teal-500                 { background-color: var(--brand-500) !important; }
.bg-teal-600                 { background-color: var(--brand-600) !important; }
.bg-teal-700                 { background-color: var(--brand-700) !important; }
.bg-teal-800                 { background-color: var(--brand-800) !important; }
.bg-teal-900                 { background-color: var(--brand-900) !important; }
.bg-teal-900\/60             { background-color: rgba(57, 183, 224, 0.15) !important; }
.hover\:bg-teal-50:hover     { background-color: var(--brand-50)  !important; }
.hover\:bg-teal-500:hover    { background-color: var(--brand-500) !important; }
.hover\:bg-teal-600:hover    { background-color: var(--brand-600) !important; }
.hover\:bg-teal-700:hover    { background-color: var(--brand-700) !important; }
.active\:bg-teal-100:active  { background-color: var(--brand-100) !important; }
.active\:bg-teal-800:active  { background-color: var(--brand-800) !important; }

/* Border */
.border-teal-50                { border-color: var(--brand-50)  !important; }
.border-teal-100               { border-color: var(--brand-100) !important; }
.border-teal-200               { border-color: var(--brand-200) !important; }
.border-teal-500               { border-color: var(--brand-500) !important; }
.border-teal-600               { border-color: var(--brand-600) !important; }
.hover\:border-teal-200:hover  { border-color: var(--brand-200) !important; }
.hover\:border-teal-400:hover  { border-color: var(--brand-400) !important; }
.hover\:border-teal-600:hover  { border-color: var(--brand-600) !important; }
.focus\:border-teal-500:focus  { border-color: var(--brand-500) !important; }

/* Opacity-modifier variants (e.g. teal-400/80, teal-400/70) */
.text-teal-400\/80  { color: rgba(57, 183, 224, 0.80) !important; }
.text-teal-400\/70  { color: rgba(57, 183, 224, 0.70) !important; }
.text-teal-400\/60  { color: rgba(57, 183, 224, 0.60) !important; }
.bg-teal-400\/10    { background-color: rgba(57, 183, 224, 0.10) !important; }
.bg-teal-400\/20    { background-color: rgba(57, 183, 224, 0.20) !important; }
.bg-teal-900\/40    { background-color: rgba(57, 183, 224, 0.10) !important; }