@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* ----------------------------------------
   Global Design Tokens
---------------------------------------- */
:root {
    --ah-primary: #3B82F6;
    --ah-secondary: #1E40AF;
    --ah-accent: #6366F1;
    --ah-background: #F8FAFC;
    --ah-surface: #FFFFFF;
    --ah-text: #111827;
    --ah-muted: #6B7280;
    --ah-border: #E5E7EB;
    --ah-border-radius: 12px;
    --ah-space-base: 16px;
    --ah-space-xs: calc(var(--ah-space-base) * 0.5);
    --ah-space-sm: calc(var(--ah-space-base) * 0.75);
    --ah-space-md: var(--ah-space-base);
    --ah-space-lg: calc(var(--ah-space-base) * 1.5);
    --ah-space-xl: calc(var(--ah-space-base) * 2);
    --ah-font-family: "Inter", "Segoe UI", sans-serif;
    --ah-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

    --affiliatehub-primary: var(--ah-primary);
    --affiliatehub-secondary: var(--ah-secondary);
    --affiliatehub-primary-dark: var(--ah-secondary);
    --affiliatehub-accent: var(--ah-accent);
    --affiliatehub-background: var(--ah-background);
    --affiliatehub-card: var(--ah-surface);
    --affiliatehub-border: var(--ah-border);
    --affiliatehub-text: var(--ah-text);
    --affiliatehub-muted: var(--ah-muted);
}

/* ----------------------------------------
   Global Foundation
---------------------------------------- */
.affiliatehub-container,
.affiliatehub-section,
.affiliatehub-card,
.affiliatehub-button-primary,
.affiliatehub-button-secondary,
.affiliatehub-placeholder,
.affiliatehub-dashboard,
.affiliatehub-card-grid {
    box-sizing: border-box;
}

.affiliatehub-container,
.affiliatehub-section,
.affiliatehub-card,
.affiliatehub-button-primary,
.affiliatehub-button-secondary,
.affiliatehub-placeholder,
.affiliatehub-dashboard,
.affiliatehub-dashboard *,
.affiliatehub-card-grid {
    font-family: var(--ah-font-family);
}

.affiliatehub-dashboard,
.affiliatehub-section,
.affiliatehub-card,
.affiliatehub-container,
.affiliatehub-section p,
.affiliatehub-card p,
.affiliatehub-card-grid {
    color: var(--affiliatehub-text);
    font-size: 16px;
}

/* ----------------------------------------
   Global Typography
---------------------------------------- */
.affiliatehub-dashboard h1,
.affiliatehub-dashboard h2,
.affiliatehub-dashboard h3,
.affiliatehub-dashboard h4,
.affiliatehub-dashboard h5,
.affiliatehub-dashboard h6,
.affiliatehub-section h1,
.affiliatehub-section h2,
.affiliatehub-section h3,
.affiliatehub-section h4,
.affiliatehub-section h5,
.affiliatehub-section h6,
.affiliatehub-card h1,
.affiliatehub-card h2,
.affiliatehub-card h3,
.affiliatehub-card h4,
.affiliatehub-card h5,
.affiliatehub-card h6 {
    font-family: var(--ah-font-family);
    font-weight: 600;
}

.affiliatehub-section p,
.affiliatehub-card p,
.affiliatehub-dashboard p,
.affiliatehub-container p {
    color: var(--affiliatehub-text);
    font-family: var(--ah-font-family);
    font-size: 16px;
    line-height: 1.65;
}

/* ----------------------------------------
   Global Container
---------------------------------------- */
.affiliatehub-container {
    margin: auto;
    max-width: 1200px;
    padding: calc(var(--ah-space-xl) + var(--ah-space-xs)) calc(var(--ah-space-lg) - var(--ah-space-xs));
    width: 100%;
}

/* ----------------------------------------
   Shared Section Spacing
---------------------------------------- */
.affiliatehub-section {
    background: var(--affiliatehub-background);
    padding: calc(var(--ah-space-xl) * 2.5) calc(var(--ah-space-lg) - var(--ah-space-xs));
}

/* ----------------------------------------
   Optional Card Layout Helper
---------------------------------------- */
.affiliatehub-card-grid {
    display: grid;
    gap: var(--ah-space-lg);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ----------------------------------------
   Card Component
---------------------------------------- */
.affiliatehub-card {
    background: var(--affiliatehub-card);
    border: 1px solid var(--affiliatehub-border);
    border-radius: var(--ah-border-radius);
    box-shadow: var(--ah-card-shadow);
    padding: var(--ah-space-lg);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.affiliatehub-card:hover,
.affiliatehub-card:focus-within {
    transform: translateY(-2px);
}

/* ----------------------------------------
   Shared Button Styles
---------------------------------------- */
.affiliatehub-button-primary,
.affiliatehub-button-secondary {
    align-items: center;
    border: 1px solid transparent;
    border-radius: calc(var(--ah-border-radius) - 4px);
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    gap: var(--ah-space-xs);
    justify-content: center;
    min-height: 48px;
    padding: calc(var(--ah-space-sm) - 2px) calc(var(--ah-space-md) + 2px);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.affiliatehub-button-primary:hover,
.affiliatehub-button-primary:focus,
.affiliatehub-button-secondary:hover,
.affiliatehub-button-secondary:focus {
    box-shadow: var(--ah-card-shadow);
    transform: translateY(-1px);
}

.affiliatehub-button-primary {
    background: linear-gradient(135deg, var(--ah-primary), var(--ah-secondary));
    color: #ffffff;
}

.affiliatehub-button-secondary {
    background: var(--ah-surface);
    border: 1px solid var(--affiliatehub-border);
    color: var(--affiliatehub-text);
}

/* ----------------------------------------
   Placeholder Block
---------------------------------------- */
.affiliatehub-placeholder {
    background: linear-gradient(135deg, var(--ah-primary), var(--ah-accent));
    border-radius: calc(var(--ah-border-radius) + 8px);
    height: 320px;
    width: 100%;
}

.affiliatehub-hero {
    overflow: hidden;
    position: relative;
}

.affiliatehub-hero__grid {
    align-items: center;
    display: grid;
    gap: calc(var(--ah-space-xl));
    grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr);
}

.affiliatehub-hero__content {
    max-width: 760px;
}

.affiliatehub-hero__description {
    font-size: 18px;
    max-width: 62ch;
}

.affiliatehub-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--ah-space-sm) + 2px);
    margin-top: var(--ah-space-lg);
}

.affiliatehub-hero__highlights {
    color: var(--affiliatehub-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--ah-space-sm);
    margin-top: calc(var(--ah-space-md) + 4px);
}

.affiliatehub-hero__highlights span {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(229, 231, 235, 0.92);
    border-radius: 999px;
    padding: var(--ah-space-xs) calc(var(--ah-space-sm) + 2px);
}

.affiliatehub-hero__preview-column {
    display: flex;
    justify-content: flex-end;
}

.affiliatehub-hero-preview {
    margin-left: auto;
    max-width: 340px;
    padding: calc(var(--ah-space-sm) + 2px);
    transform: translateY(18px);
    width: 100%;
}

.affiliatehub-hero-preview__toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.affiliatehub-hero-preview__toolbar span {
    background: #d1d5db;
    border-radius: 999px;
    display: inline-block;
    height: 10px;
    width: 10px;
}

.affiliatehub-hero-preview__frame {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.96));
    border: 1px solid rgba(229, 231, 235, 0.95);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    padding: 14px;
}

.affiliatehub-hero-preview__stats,
.affiliatehub-hero-preview__cards {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.affiliatehub-hero-preview__stat,
.affiliatehub-hero-preview__mini-card {
    padding: 14px;
}

.affiliatehub-hero-preview__stat strong {
    display: block;
    font-size: 22px;
    margin-bottom: 4px;
}

.affiliatehub-hero-preview__placeholder {
    height: 180px;
    margin: 14px 0;
    opacity: 0.9;
}

.affiliatehub-profile-dashboard__hero,
.affiliatehub-profile-dashboard__identity,
.affiliatehub-profile-dashboard__earnings {
    grid-column: span 3;
}

.affiliatehub-profile-dashboard__identity-grid {
    display: grid;
    gap: calc(var(--ah-space-md) + 2px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.affiliatehub-profile-dashboard__identity-grid strong,
.affiliatehub-profile-dashboard__identity-grid a {
    display: block;
    margin-top: 6px;
    overflow-wrap: anywhere;
}

.affiliatehub-profile-dashboard__label {
    color: var(--affiliatehub-muted);
    display: block;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.affiliatehub-error-page__grid {
    align-items: center;
    display: grid;
    gap: calc(var(--ah-space-xl) - 4px);
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
}

.affiliatehub-error-page__preview {
    text-align: center;
}

.affiliatehub-error-page__code {
    color: var(--affiliatehub-primary-dark);
    display: block;
    font-size: clamp(72px, 16vw, 120px);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 12px;
}

/* ----------------------------------------
   Responsive Shared Components
---------------------------------------- */
@media (max-width: 900px) {
    .affiliatehub-card-grid {
        grid-template-columns: 1fr;
    }

    .affiliatehub-hero__grid,
    .affiliatehub-error-page__grid,
    .affiliatehub-profile-dashboard__identity-grid {
        grid-template-columns: 1fr;
    }

    .affiliatehub-hero__preview-column {
        justify-content: flex-start;
    }

    .affiliatehub-hero-preview {
        margin-left: 0;
        max-width: 100%;
        transform: none;
    }

    .affiliatehub-profile-dashboard__hero,
    .affiliatehub-profile-dashboard__identity,
    .affiliatehub-profile-dashboard__earnings {
        grid-column: auto;
    }
}

@media (max-width: 680px) {
    .affiliatehub-container {
        padding: var(--ah-space-xl) var(--ah-space-md);
    }

    .affiliatehub-section {
        padding: calc(var(--ah-space-xl) * 1.75) var(--ah-space-md);
    }

    .affiliatehub-card {
        width: 100%;
    }

    .affiliatehub-button-primary,
    .affiliatehub-button-secondary {
        width: 100%;
    }

    .affiliatehub-hero__actions {
        flex-direction: column;
    }

    .affiliatehub-hero-preview__stats,
    .affiliatehub-hero-preview__cards {
        grid-template-columns: 1fr;
    }
}