/* Shared design tokens + resets loaded once by the shell (index.html).
   Per-page stylesheets no longer declare their own :root/reset/body/.fade-up
   blocks — this file is the single source of truth for all of that. */

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

:root {
    --pink-50:   #fdf3f8;
    --pink-100:  #f9dff0;
    --pink-200:  #f2bade;
    --pink-400:  #e07ab8;
    --pink-600:  #c0509a;
    --pink-900:  #5a1a44;
    --lav-50:    #f3f2ff;
    --lav-100:   #e4e0fc;
    --lav-200:   #c9c4f7;
    --lav-400:   #9b93ea;
    --lav-600:   #6c61cc;
    --off-white: #fdfaf8;
    --white:     #ffffff;
    --text-dark: #1a1018;
    --text-mid:  #5c4d58;
    --text-light:#9e8ea0;
    --border:    rgba(180, 140, 170, 0.18);

    /* shorthand aliases (used by home.css) */
    --pink:       var(--pink-600);
    --pink-light: var(--pink-100);
    --pink-mid:   var(--pink-200);
    --ink:        var(--text-dark);
    --muted:      var(--text-mid);
    --cream:      var(--off-white);

    /* ── silver / chrome accents — layered on top of the pink/lavender base ── */
    --chrome-100: #eef0f3;
    --chrome-300: #c3c9d1;
    --chrome-400: #a3abb6;
    --chrome-600: #6b7280;
    --metallic-border: linear-gradient(135deg, #e8eaee, #b8bec8 40%, #f4f5f7 55%, #9aa1ad 80%, #dfe2e7);
    --silver-sheen: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 45%, rgba(200,205,215,.4) 52%, rgba(255,255,255,0) 100%);

    /* ── motion — CSS approximations of Apple's damping/response spring table ── */
    --ease-out-smooth: cubic-bezier(0.22, 1, 0.36, 1);     /* damping 1.0: decelerate, no overshoot */
    --ease-in-smooth:  cubic-bezier(0.64, 0, 0.78, 0);     /* exact mirror, for symmetric exits */
    --ease-out-quick:  cubic-bezier(0.16, 1, 0.3, 1);      /* snappy hover/press micro-motion */
    --ease-spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* damping ~0.8: gesture-triggered materialize */

    --dur-instant:  100ms;
    --dur-fast:     180ms;
    --dur-base:     280ms;
    --dur-moderate: 380ms;

    /* ── type scale — tracking and leading tighten together as size grows ── */
    --fs-display: clamp(2.6rem, 6vw, 5rem);     --ls-display: -0.03em; --lh-display: 1.05;
    --fs-h1:      clamp(2.2rem, 5vw, 4rem);     --ls-h1: -0.025em;     --lh-h1: 1.1;
    --fs-h2:      clamp(1.6rem, 3.2vw, 2.4rem); --ls-h2: -0.02em;      --lh-h2: 1.2;
    --fs-h3:      clamp(1.1rem, 2vw, 1.4rem);   --ls-h3: -0.01em;      --lh-h3: 1.3;
    --fs-label:   0.6875rem;                    --ls-label: 0.14em;    --lh-label: 1.3;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--off-white);
    color: var(--text-dark);
    overflow-x: hidden;
}

/* ── FADE-UP (shared scroll-reveal utility, used by every page) ── */
.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-up.visible { opacity: 1; transform: none; }

/* ── accessibility: motion, transparency, contrast ── */
@media (prefers-reduced-motion: reduce) {
    .fade-up {
        transition: opacity 150ms linear !important;
        transform: none !important;
    }
    .notify-modal-overlay, .notify-modal-overlay .notify-modal,
    .nav-links {
        transition-duration: 150ms !important;
        transition-timing-function: linear !important;
    }
    .notify-modal-overlay.open .notify-modal,
    .nav-links.open {
        transform: none !important;
        filter: none !important;
    }
}
@media (prefers-reduced-transparency: reduce) {
    .nav, .nav.scrolled, .nav-links, .notify-modal-overlay.open {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .nav, .nav.scrolled, .nav-links { background: var(--off-white) !important; }
    .notify-modal-overlay.open { background: rgba(26, 16, 24, 0.85) !important; }
}
@media (prefers-contrast: more) {
    :root { --border: rgba(26, 16, 24, 0.35); }
    .nav { background: var(--off-white); border-bottom: 1px solid var(--text-dark); backdrop-filter: none; }
    .notify-modal, .event-card, .calendar-card, .project-card, .member-card { border: 1.5px solid var(--text-dark); }
}