/* =============================================
   base.css — Global & Shared Styles
   ============================================= */

/* ---- Base ---- */
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    background-color: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
}

/* ---- Utility: Monospace ---- */
.mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}

/* ---- Skip Link (Accessibility) ---- */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--sp-4);
    background: var(--color-blue);
    color: #fff;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-md);
    z-index: 9999;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--sp-4);
}

/* ---- Shared Section Container ---- */
.section-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--sp-20) var(--container-pad);
}

/* ---- Section Header ---- */
.section-header {
    margin-bottom: var(--sp-12);
}

.section-label {
    display: inline-block;
    font-size: var(--text-xs);
    color: var(--color-blue);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--sp-3);
}

.section-title {
    font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: var(--sp-3);
}

.section-desc {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    max-width: 540px;
}

/* ---- Card Base ---- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-8);
    margin-bottom: var(--sp-6);
    transition: border-color var(--transition-base);
}

.card:hover {
    border-color: var(--color-border-hover);
}

.card__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--color-border);
}

.card__subtitle {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-3);
}

.card__body {
    color: var(--color-text-muted);
    line-height: 1.8;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    border: none;
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-fast);
    text-decoration: none;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn--primary {
    background: var(--color-blue);
    color: #fff;
}

.btn--primary:hover {
    background: #2563eb;
    box-shadow: var(--shadow-blue);
}

.btn--full {
    width: 100%;
    justify-content: center;
}

/* ---- Focus visible ---- */
:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}