/* ============================================================
   BASE — crest-inspired design tokens, reset, typography
   ============================================================ */

/*
 * BREAKPOINT SYSTEM (mobile-first)
 * --bp-sm:  480px  — small phones landscape / large phones portrait
 * --bp-md:  768px  — tablets portrait
 * --bp-lg: 1024px  — tablets landscape / small laptops
 * --bp-xl: 1280px  — standard desktops
 * Usage: @media (min-width: 480px) { ... }
 * New code should follow these; legacy ad-hoc values (860px, 960px etc.) are not refactored to avoid regressions.
 */

:root {
    /* — Crest palette — */
    --pitch:        #1A5C2A;   /* primary: deep pitch green */
    --pitch-dark:   #0d3019;   /* very dark green */
    --pitch-mid:    #2a7d3c;   /* mid green */
    --pitch-light:  #e8f2ea;   /* tint for backgrounds */
    --navy:         #0d1e35;   /* secondary: deep navy */
    --navy-mid:     #1a3050;
    --gold:         #C49A1A;   /* accent: heritage gold — used sparingly */
    --gold-warm:    #d4aa28;
    --cream:        #F5F0E8;   /* page bg: warm parchment */
    --cream-mid:    #ebe4d5;
    --white:        #FFFDF8;   /* warm white */
    --ink:          #111820;
    --slate:        #4a5568;
    --muted:        #9aa3ae;
    --error-red:    #C0392B;
    --success-green:#2E7D32;

    /* — Spacing — */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
    --sp-4: 1rem;     --sp-5: 1.25rem;  --sp-6: 1.5rem;
    --sp-8: 2rem;     --sp-10: 2.5rem;  --sp-12: 3rem;
    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

    /* — Circular motif radii — */
    --r-circle: 50%;    /* logo frames, icon badges, dots */
    --r-sm: 5px;
    --r-md: 10px;
    --r-lg: 18px;
    --r-xl: 28px;
    --r-2xl: 44px;
    --r-full: 9999px;   /* pill shapes */

    /* — Shadows — */
    --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
    --shadow-md:  0 4px 20px rgba(0,0,0,.11);
    --shadow-lg:  0 12px 40px rgba(0,0,0,.15);
    --shadow-xl:  0 20px 60px rgba(0,0,0,.20);

    /* — Motion — */
    --ease:        0.22s ease;
    --ease-out:    0.38s cubic-bezier(0.2, 0.8, 0.3, 1);
    --ease-spring: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    /* — Layout — */
    --container-max: 1240px;
    --container-px:  1.5rem;

    /* — Accessibility — */
    --focus-ring:    3px solid var(--gold);
    --focus-offset:  3px;

    /* — Contrast-safe gold for use on light (cream/white) backgrounds (5.1:1 ratio, AA compliant) — */
    --gold-accessible: #8a6a0a;

    /* — Loading / skeleton tokens — */
    --spinner-size:    20px;
    --skeleton-base:   #e2e8f0;
    --skeleton-shine:  #f8fafc;

    /* — Canonical breakpoints (JS reference only; use in @media via literal px values) — */
    --bp-sm:  480px;
    --bp-md:  768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; }

/* ---- Rounded display headings (Nunito) ---- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 900;
    line-height: 1.18;
    color: var(--navy);
}
h1 { font-size: clamp(2rem,   5vw,   3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.1rem,  2vw,   1.4rem); }
h4 { font-size: 1.1rem; }
p  { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* ---- Layout helpers ---- */
.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-px);
}

/* ---- Section wrapper ---- */
.section        { padding-block: var(--sp-20); }
.section--sm    { padding-block: var(--sp-12); }
.section--white { background: var(--white); }
.section--cream { background: var(--cream); }
.section--pitch { background: var(--pitch); color: var(--white); }
.section--navy  { background: var(--navy);  color: var(--white); }

/* ---- Eyebrow label ---- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pitch);
    margin-bottom: var(--sp-3);
}
.eyebrow::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: var(--r-full);
    flex-shrink: 0;
}
.section--pitch .eyebrow,
.section--navy  .eyebrow { color: var(--gold); }
.section--pitch .eyebrow::before,
.section--navy  .eyebrow::before { background: var(--gold); }

/* ---- Script accent (ONLY for "Where Rising Stars Begin") ---- */
.script-accent {
    font-family: 'Pacifico', cursive;
    font-weight: 400;
}

/* ---- Accessibility ---- */
.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;
}
:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: var(--r-sm);
}

/* ---- Scroll reveal ---- */
[data-reveal] { transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); }
[data-reveal].reveal-pending { opacity: 0; transform: translateY(28px); }
[data-reveal].reveal-done    { opacity: 1; transform: translateY(0); }
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.32s; }

/* ---- 404 / Error ---- */
.error-page {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8rem var(--container-px) 4rem;
    gap: var(--sp-4);
}
.error-code {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(5rem, 16vw, 10rem);
    font-weight: 900;
    color: var(--pitch-light);
    line-height: 1;
    -webkit-text-stroke: 2px var(--pitch);
    background: none;
}

/* ---- Respect user motion preference ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    [data-reveal].reveal-pending {
        opacity: 1 !important;
        transform: none !important;
    }
}