/**
 * AgeBound Experience Suite – Core Styles
 *
 * Design tokens, typography, and reusable utilities.
 * All styles scoped under .abx-tools-page to avoid leaking.
 */

/* ──────────────────────────────────────────────
 * Design Tokens
 * ────────────────────────────────────────────── */
.abx-tools-page,
.abx-trip-fit-page {
    --abx-bg: #F5F2ED;
    --abx-surface: #ffffff;
    --abx-text: #21313c;
    --abx-muted: #5f6c75;
    --abx-primary: #2E8B57;
    --abx-secondary: #1A365D;
    --abx-tertiary: #8B5E3C;
    --abx-warm: #F3D5C2;
    --abx-border: rgba(26, 54, 93, .10);
    --abx-shadow: 0 18px 50px rgba(21, 32, 44, .10);
    --abx-shadow-sm: 0 4px 16px rgba(21, 32, 44, .06);
    --abx-shadow-hover: 0 22px 60px rgba(21, 32, 44, .14);
    --abx-radius: 18px;
    --abx-radius-sm: 12px;
    --abx-radius-xs: 8px;
    --abx-radius-pill: 100px;
    --abx-transition: 0.28s cubic-bezier(.4, 0, .2, 1);
    --abx-font-serif: Georgia, 'Times New Roman', serif;
    --abx-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --abx-max-width: 1280px;

    font-family: var(--abx-font-sans);
    color: var(--abx-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ──────────────────────────────────────────────
 * Reset / Base (scoped)
 * ────────────────────────────────────────────── */
.abx-tools-page *,
.abx-tools-page *::before,
.abx-tools-page *::after,
.abx-trip-fit-page *,
.abx-trip-fit-page *::before,
.abx-trip-fit-page *::after {
    box-sizing: border-box;
}

.abx-tools-page img,
.abx-trip-fit-page img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ──────────────────────────────────────────────
 * Typography
 * ────────────────────────────────────────────── */
.abx-tools-page .abx-heading-serif,
.abx-trip-fit-page .abx-heading-serif {
    font-family: var(--abx-font-serif);
    color: var(--abx-secondary);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.abx-tools-page .abx-kicker,
.abx-trip-fit-page .abx-kicker {
    font-family: var(--abx-font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--abx-primary);
    margin-bottom: 0.5rem;
}

.abx-tools-page .abx-body-text,
.abx-trip-fit-page .abx-body-text {
    font-family: var(--abx-font-sans);
    color: var(--abx-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ──────────────────────────────────────────────
 * Buttons
 * ────────────────────────────────────────────── */
.abx-tools-page .abx-btn,
.abx-trip-fit-page .abx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--abx-font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: var(--abx-radius-pill);
    padding: 0.85rem 2rem;
    transition: all var(--abx-transition);
    line-height: 1.3;
}

.abx-tools-page .abx-btn-primary,
.abx-trip-fit-page .abx-btn-primary {
    background: var(--abx-secondary);
    color: #ffffff;
}

.abx-tools-page .abx-btn-primary:hover,
.abx-trip-fit-page .abx-btn-primary:hover {
    background: #0f2442;
    transform: translateY(-2px);
    box-shadow: var(--abx-shadow-sm);
}

.abx-tools-page .abx-btn-warm,
.abx-trip-fit-page .abx-btn-warm {
    background: var(--abx-warm);
    color: var(--abx-secondary);
}

.abx-tools-page .abx-btn-warm:hover,
.abx-trip-fit-page .abx-btn-warm:hover {
    background: #efc5aa;
    transform: translateY(-2px);
    box-shadow: var(--abx-shadow-sm);
}

.abx-tools-page .abx-btn-outline,
.abx-trip-fit-page .abx-btn-outline {
    background: transparent;
    color: var(--abx-secondary);
    border: 2px solid var(--abx-secondary);
}

.abx-tools-page .abx-btn-outline:hover,
.abx-trip-fit-page .abx-btn-outline:hover {
    background: var(--abx-secondary);
    color: #ffffff;
    transform: translateY(-2px);
}

.abx-tools-page .abx-btn-sm,
.abx-trip-fit-page .abx-btn-sm {
    padding: 0.6rem 1.4rem;
    font-size: 0.88rem;
}

/* ──────────────────────────────────────────────
 * Cards
 * ────────────────────────────────────────────── */
.abx-tools-page .abx-card,
.abx-trip-fit-page .abx-card {
    background: var(--abx-surface);
    border-radius: var(--abx-radius);
    box-shadow: var(--abx-shadow-sm);
    border: 1px solid var(--abx-border);
    transition: all var(--abx-transition);
    overflow: hidden;
}

.abx-tools-page .abx-card:hover,
.abx-trip-fit-page .abx-card:hover {
    box-shadow: var(--abx-shadow-hover);
    transform: translateY(-3px);
}

/* ──────────────────────────────────────────────
 * Container
 * ────────────────────────────────────────────── */
.abx-tools-page .abx-container,
.abx-trip-fit-page .abx-container {
    max-width: var(--abx-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ──────────────────────────────────────────────
 * Section Spacing
 * ────────────────────────────────────────────── */
.abx-tools-page .abx-section,
.abx-trip-fit-page .abx-section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

.abx-tools-page .abx-section-header,
.abx-trip-fit-page .abx-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.abx-tools-page .abx-section-header .abx-heading-serif,
.abx-trip-fit-page .abx-section-header .abx-heading-serif {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.abx-tools-page .abx-section-header .abx-body-text,
.abx-trip-fit-page .abx-section-header .abx-body-text {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* ──────────────────────────────────────────────
 * Full-bleed helper
 * ────────────────────────────────────────────── */
.abx-tools-page .abx-full-bleed,
.abx-trip-fit-page .abx-full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
}

/* ──────────────────────────────────────────────
 * Accessibility
 * ────────────────────────────────────────────── */
.abx-tools-page .abx-sr-only,
.abx-trip-fit-page .abx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ──────────────────────────────────────────────
 * Responsive
 * ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .abx-tools-page .abx-section,
    .abx-trip-fit-page .abx-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .abx-tools-page .abx-section-header .abx-heading-serif,
    .abx-trip-fit-page .abx-section-header .abx-heading-serif {
        font-size: 1.6rem;
    }

    .abx-tools-page .abx-btn,
    .abx-trip-fit-page .abx-btn {
        padding: 0.9rem 1.6rem;
        font-size: 0.92rem;
        width: 100%;
    }
}