/* ============================================
   BASE — reset, tokens, typography, utilities
   Leaders On Purpose — template foundation
   ============================================ */

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

:root {
    /* Neutrals */
    --black: #0A0A0A;
    --darker: #0A060C;
    --dark: #111111;
    --white: #FFFFFF;
    --off-white: #E5E2E1;
    --muted: #9CA3AF;
    --card: #111119;
    --card-hover: #181825;

    /* Leaders On Purpose — Teal */
    --teal: #19A4A6;
    --teal-light: #2CBCBE;
    /* Deeper teal for filled buttons: white text on --teal is only 3.04:1,
       on --teal-deep it's 5.0:1 (WCAG AA). */
    --teal-deep: #0E7C7E;
    --teal-dim: rgba(25, 164, 166, 0.12);

    /* Leaders On Stage — Gold */
    --gold: #F3DA77;
    --gold-dark: #AE7A2B;
    --gold-dim: rgba(243, 218, 119, 0.10);
    --olive: #3F3715;
    --ochre: #D0A77;
    --burnished: #AE7A2B;
    --burnished-gold: #A17A28;

    /* LOP Executive — Blue */
    --blue: #377FBE;
    --blue-dark: #2A358B;
    --blue-dim: rgba(55, 127, 190, 0.12);
    --cerulean: #377FBE;
    --indigo: #2A358B;
    --midnight: #131360;
    --exec-blue: #377FBE;

    /* LOP Associates — Orchid */
    --orchid: #9C248F;
    /* Lighter orchid for small accent text on dark bg: #9C248F only reaches
       ~2.8:1, this reaches 5.26:1 (WCAG AA). */
    --orchid-light: #CE5BC0;
    --orchid-dark: #6A2A82;
    --plum: #6A2A82;
    --plum-dim: rgba(106, 42, 130, 0.12);
    --wine: #600E3D;

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }

body {
    background: var(--black);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* === UTILITIES === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.section-padding { padding: 120px 0; }

.teal-text { color: var(--teal); }
.teal-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--teal), var(--teal-light));
}
.gold-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-dark));
}
.orchid-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--orchid), var(--orchid-dark));
}
.section-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--teal) 20%, var(--teal-light) 50%, var(--teal) 80%, transparent 100%);
    opacity: 0.15;
}

/* === SKIP LINK & FOCUS === */
.skip-link {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
    z-index: 9999; padding: 12px 24px;
    background: var(--teal); color: var(--black);
    font-family: var(--font-heading); font-size: 14px; font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    position: fixed; top: 10px; left: 10px;
    width: auto; height: auto;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* === RESPONSIVE (container + section spacing) === */
@media (max-width: 768px) {
    .container { padding: 0 24px; }
    .section-padding { padding: 100px 0; }
}