/**
 * Custom typography + brand tokens for the PHP mirror.
 * Utility layout classes come from Tailwind (loaded via CDN in head.php).
 */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    --color-evergreen: #1F2E2A;
    --color-sage: #3D6B6E;
    --color-teal: #26A69A;
    --color-paper: #F6F5F0;
    --color-mist: #E9EDE9;
}

.ba-root {
    font-family: 'Instrument Sans', sans-serif;
    color: var(--color-evergreen);
    background: var(--color-paper);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ba-display {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.ba-serif {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.ba-mono {
    font-family: 'IBM Plex Mono', monospace;
}

/* Reveal-on-scroll animation (matches Reveal.jsx behavior on the React side) */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero-level rise-in animations (mirror ba-rise* on React side) */
@keyframes ba-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ba-rise   { animation: ba-rise 0.7s ease-out both; }
.ba-rise-2 { animation: ba-rise 0.7s ease-out 0.15s both; }
.ba-rise-3 { animation: ba-rise 0.7s ease-out 0.30s both; }

/* Global body padding to clear the fixed header */
main#main-content {
    flex-grow: 1;
}

/* Screen-reader only utility (Tailwind provides sr-only but define locally in case CDN loads late) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}