/* === BASE STYLES === */

html,
body {
    scroll-snap-type: y proximity;
}

body {
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    overflow-x: hidden;
}

/* ── Typography ── */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h1 {
    font-size: var(--text-h1);
}

h2 {
    font-size: var(--text-h2);
}

h3 {
    font-size: var(--text-h3);
}

p {
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

/* ── Container ── */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
}

/* ── Section wrapper ── */
.section {
    padding: var(--space-section) 0;
    position: relative;
}

/* ── Reveal animations ── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity var(--duration-reveal) var(--ease-out),
        transform var(--duration-reveal) var(--ease-out);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 {
    transition-delay: 100ms;
}

.reveal-delay-2 {
    transition-delay: 200ms;
}

.reveal-delay-3 {
    transition-delay: 300ms;
}

.reveal-delay-4 {
    transition-delay: 400ms;
}

/* ── Button styles ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-pill);
    transition: all var(--duration-normal) var(--ease-smooth);
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary {
    background: var(--color-dark-card);
    color: var(--color-text-light);
}

.btn-primary:hover {
    background: var(--color-dark-card-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card);
}

.btn-outline {
    background: transparent;
    color: var(--color-text-primary);
    border: 1.5px solid var(--color-text-primary);
}

.btn-outline:hover {
    background: var(--color-text-primary);
    color: var(--color-text-white);
    transform: translateY(-2px);
}

.btn-accent {
    background: var(--color-accent);
    color: var(--color-text-white);
}

.btn-accent:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(41, 75, 255, 0.3);
}

/* Card CTA — white pill button */
.btn-card {
    background: var(--color-text-white);
    color: var(--color-text-primary);
    padding: 1rem 2.625rem;
}

.btn-card:hover {
    background: var(--color-bg-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ── Tag ── */
.tag {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-tag);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-tag-bg);
    color: var(--color-tag-text);
    backdrop-filter: blur(8px);
}

/* ── Selection ── */
::selection {
    background: var(--color-accent);
    color: var(--color-text-white);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-text-muted);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}