/* ── Meeting Milestones Design System ── */

:root {
    /* Colors */
    --sage-dark: #6f9a78;
    --sage: #8fb896;
    --sage-light: #b2d4ba;
    --sage-text: #4D7A55;
    --blue: #4a6785;
    --blue-light: #6a87a5;
    --blue-pale: #9db4c8;
    --cream: #faf9f6;
    --warm-white: #fdfcfa;
    --text-dark: #2d3748;
    --text-medium: #4a5568;
    --text-light: #718096;

    /* Layout (pages may override) */
    --content-max: 1120px;
    --gutter: clamp(1.25rem, 5vw, 2rem);
    --section-pad: clamp(3rem, 6vw, 5rem);

    /* Shape */
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;

    /* Shadows */
    --shadow-soft: 0 8px 32px rgba(45, 55, 72, 0.1);
    --shadow-card: 0 4px 16px rgba(45, 55, 72, 0.08);
    --ring: 0 0 0 3px rgba(74, 103, 133, 0.28);
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Lato", sans-serif;
    color: var(--text-dark);
    background: var(--warm-white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    padding-top: 60px;
}

h1, h2, h3, h4 {
    font-family: "Quattrocento", Georgia, serif;
    line-height: 1.3;
}

a { color: inherit; }
a:focus-visible, button:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

img { max-width: 100%; display: block; }

.container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ── Footer ── */
footer {
    background: var(--text-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 2rem 0;
    text-align: center;
    font-size: 0.9rem;
}

footer a {
    color: var(--sage-light);
    text-decoration: none;
}

footer a:hover {
    color: white;
    text-decoration: underline;
}

/* ── Page Entrance ── */
@keyframes pageIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

main {
    animation: pageIn 0.5s ease both;
}

@media (prefers-reduced-motion: reduce) {
    main { animation: none; }
}

/* ── Spinner (reusable) ── */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 0.5rem;
}