/*
 * Design tokens — shared by every page.
 * Keep names stable; pages reference these directly in inline styles.
 */
:root {
    /* Brand palette */
    --sage: #7a9e7e;
    --sage-deep: #5a7d5e;
    --sage-dark: #3d5940;
    --sage-light: #e8f0e9;
    --sage-mist: #f2f7f3;

    --sand: #f5f0e8;
    --sand-light: #faf7f2;
    --sand-warm: #f0e8d8;

    --gold: #b8976a;
    --gold-light: #d4bc96;
    --gold-dark: #9a7b52;

    --cream: #fefcf8;

    /* Text */
    --text: #2a2f2b;
    --text-mid: #4a5248;
    --text-soft: #6d756b;
    --text-muted: #8f958d;

    /* Surfaces */
    --border: rgba(122,158,126,0.12);
    --glass: rgba(255,255,255,0.72);
    --glass-strong: rgba(255,255,255,0.88);

    /* Elevation */
    --shadow-sm: 0 2px 8px rgba(42,47,43,0.04);
    --shadow-md: 0 8px 32px rgba(42,47,43,0.06);
    --shadow-lg: 0 24px 64px rgba(42,47,43,0.08);
    --shadow-glow: 0 8px 40px rgba(122,158,126,0.15);

    /* Radii */
    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--text);
    background: var(--cream);
    line-height: 1.6;
}

/* Shared motion */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* PHI banner — used on any page that shows protected data. */
.phi-banner {
    background: #7f1d1d;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 6px 12px;
}