/* =========================================================
   base.css
   Reset + variables + typography + links + buttons
   ========================================================= */

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

:root {
    --green: #33cc66;
    --green-dark: #1d703e;
    --green-glow: rgba(51, 204, 102, 0.35);
    --black: #0b0f0d;
    --black-2: #111512;
    --gray: #c7c7c7;
    --gray-light: #eeeeee;
    --radius: 14px;
    --text-primary: #f2f2f2;
    --text-secondary: #cfd6d1;
    --text-tertiary: #9aa3a0;
    --topHeaderH: 76px;
    --subHeaderH: 52px;
}

/* Base body */
body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    /* OPTION E (refined) */
    background: linear-gradient(135deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg, #0b0f0d 0%, #0f1412 100%);
    color: #fff;
    line-height: 1.6;
    min-height: 100vh;
}

/* Type defaults */
h1, h2, h3, h4, h5 {
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0 0 .6rem 0;
}

p {
    margin: 0 0 1rem 0;
}

ul {
    margin: 0 0 1rem 1.2rem;
}

li {
    margin: .25rem 0;
}

.page-muted {
    opacity: .78;
    font-size: .92rem;
    color: var(--text-secondary);
}

/* Paragraphs, lists, article content */
p,
li,
.article-body,
.page-lede,
.page-muted {
    color: var(--text-secondary);
}

/* Links */
a {
    color: var(--green);
    text-decoration: none;
}

    a:hover {
        color: #55ff88;
    }

/* Prevent accent color from affecting body text */
.article-body a:not(.btn-solid):not(.btn-outline),
.editorial a:not(.btn-solid):not(.btn-outline),
.page-section a:not(.btn-solid):not(.btn-outline) {
    color: var(--text-secondary);
    text-decoration: underline;
}

.article-body a:hover,
.editorial a:hover {
    color: var(--text-primary);
}

/* Buttons */
.btn-solid {
    background: var(--green);
    color: #000;
    padding: .7rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

    .btn-solid:hover {
        background: #55ff88;
    }

.btn-outline {
    border: 2px solid var(--green);
    color: var(--green);
    padding: .65rem 1.2rem;
    border-radius: var(--radius);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

    .btn-outline:hover {
        border-color: #55ff88;
        color: #55ff88;
    }

.btn-sm {
    padding: .45rem .85rem;
    font-size: .9rem;
}