/* reset, body, page show/hide, shared container + theme variables */

/* central palette, change here to retheme the whole site */
:root {
    --color-bg: #f5f5f5;
    --color-surface: #ffffff;
    --color-surface-warm: #fafafa;
    --color-surface-alt: #ececec;
    --color-surface-alt-strong: #dadada;

    --color-text: #1e1e1e;
    --color-text-secondary: #4a4a4a;
    --color-text-muted: #7a7a7a;

    --color-border: rgba(30, 30, 30, 0.08);
    --color-border-strong: rgba(30, 30, 30, 0.18);

    /* neutral darken used for ALL interactive states (button hover, link hover, dropdown hover, modal close, filter chips, focus rings) */
    --color-accent: #1e1e1e;
    --color-accent-strong: #000000;
    --color-accent-soft: rgba(30, 30, 30, 0.07);
    --color-accent-border: rgba(30, 30, 30, 0.45);

    /* color highlight, reserved for "David" + "Carnegie Mellon University" in the hero. nothing else uses this. */
    --color-highlight: #0047AB;

    /* same as accent-soft, button hover uses this to darken w/o color */
    --color-hover-darken: rgba(30, 30, 30, 0.06);

    --color-shadow: rgba(30, 30, 30, 0.08);
    --color-shadow-strong: rgba(30, 30, 30, 0.22);
    --color-modal-backdrop: rgba(30, 30, 30, 0.55);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.detail-open {
    overflow: hidden;
}

main {
    /* clear the fixed top nav (64px bar + safe-area inset) plus breathing room */
    margin-top: calc(64px + env(safe-area-inset-top) + 1.5rem);
    min-height: calc(100vh - 140px);
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 max(1.5rem, env(safe-area-inset-right)) 0 max(1.5rem, env(safe-area-inset-left));
}

/* router only sets .active on one .page at a time */
.page {
    display: none;
}

.page.active {
    display: block;
}