:root {
    /* from the wa theme */
    --wa-border-radius-scale: 0.75;
    --wa-border-width-scale: 2;
    --wa-space-scale: 1.25;
    --wa-color-brand-05: #300;
    --wa-color-brand-10: #470000;
    --wa-color-brand-20: #6d0000;
    --wa-color-brand-30: #851d00;
    --wa-color-brand-40: #9e3619;
    --wa-color-brand-50: #c2573a;
    --wa-color-brand-60: #e47558;
    --wa-color-brand-70: #ff8f71;
    --wa-color-brand-80: #ffb29a;
    --wa-color-brand-90: #ffd8ca;
    --wa-color-brand-95: #ffebe1;
    --wa-color-brand: #c2573a;
    --wa-color-brand-on: #470000;
    --wa-color-neutral-05: #01151a;
    --wa-color-neutral-10: #091f24;
    --wa-color-neutral-20: #1f363b;
    --wa-color-neutral-30: #31484e;
    --wa-color-neutral-40: #445b61;
    --wa-color-neutral-50: #5f787e;
    --wa-color-neutral-60: #80999f;
    --wa-color-neutral-70: #98b2b8;
    --wa-color-neutral-80: #b1cbd2;
    --wa-color-neutral-90: #cde9ef;
    --wa-color-neutral-95: #dcf8fe;
    --wa-color-neutral: #5f787e;
    --wa-color-neutral-on: #091f24;
    --wa-font-family-body: Figtree, sans-serif;
    --wa-font-weight-body: 400;
    --wa-font-family-heading: Figtree, sans-serif;
    --wa-font-weight-heading: 800;
    --wa-font-family-code: "Chivo Mono", monospace;
    --wa-font-weight-code: 400;
    --wa-font-family-longform: Fraunces, serif;
    --wa-font-weight-longform: 350;
}


body {
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.bg-alt {
    position: relative;
    color: var(--wa-color-neutral-90);
    background-color: var(--wa-color-neutral-10);
    background-image: url(../images/cartographer.png);
}

.wa-dark .bg-alt {
    background-color: var(--wa-color-neutral-10);
    color: var(--wa-color-neutral-90);
}


.section-padding {
    padding-block: 10ch;
    padding-inline: var(--wa-space-4xl);
}

.border-top {
    border-top: 1px solid var(--border-color);
}

/* Card utilities */
.card-standard {
    border-radius: var(--wa-border-radius-l);
}

.card-elevated {
    padding: var(--wa-space-2xl);
    border: none;
    box-shadow: var(--wa-shadow-l);
}

/* Hero Section */
.hero {
    padding: 15ch var(--wa-space-4xl) 18ch;
    color: var(--wa-color-neutral,);
    position: relative;
    overflow: hidden;
    background-color: var(--wa-color-neutral-10);
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.4));
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero h1,
.hero h2 {
    color: var(--wa-color-neutral-90);
    margin-bottom: 0;
}

.hero p {
    color: var(--wa-color-neutral-90);
    max-width: 65ch;
    font-size: var(--wa-font-size-xl);
    line-height: var(--wa-line-height-body);
}

/* Tech Icons */
.tech-icon {
    font-size: 5rem;
    color: var(--wa-color-neutral-30);
    transition: color 0.3s ease, transform 0.3s ease;
}

.wa-dark .tech-icon {
    color: var(--wa-color-neutral-90);
}

.tech-icon:hover {
    color: var(--wa-color-brand);
    transform: translateY(-5px);
}

/* Typography & Utils */
.impact-highlight {
    color: var(--wa-color-brand);
    font-weight: bold;
}

.text-brand {
    color: var(--wa-color-brand);
}

.section-kicker {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

/* Sticky Headers (Desktop Only) */
@media (min-width: 1200px) {
    .sticky-header {
        position: sticky;
        top: var(--wa-space-2xl);
    }
}

.theme-toggle-container {
    width: 100%;
    display: flex;
    padding: var(--wa-space-l);
    justify-content: flex-end;
    top: 0;
    z-index: 1000;
}

@media (min-width: 1200px) {
    .theme-toggle-container {
        position: sticky;
    }
}



html.wa-dark #theme-toggle > .fa-moon {
    display: none;
}

html:not(.wa-dark) #theme-toggle > .fa-sun {
    display: none;
}