:root {
    /* Brand */
    --gb8-primary: #0084ff;
    --gb8-primary-dark: #006fe0;
    --gb8-primary-soft: #d9ecff;

    /* Backgrounds */
    --gb8-bg: #f3f7fb;
    --gb8-surface: #ffffff;
    --gb8-surface-soft: #f8fbff;

    /* Text */
    --gb8-text: #172033;
    --gb8-text-muted: #7a8494;
    --gb8-text-light: #a0a8b5;

    /* Borders */
    --gb8-border: #e5edf5;

    /* Spacing */
    --gb8-space-1: 4px;
    --gb8-space-2: 8px;
    --gb8-space-3: 12px;
    --gb8-space-4: 16px;
    --gb8-space-5: 24px;
    --gb8-space-6: 32px;
    --gb8-space-7: 48px;

    /* Radius */
    --gb8-radius-sm: 10px;
    --gb8-radius-md: 16px;
    --gb8-radius-lg: 24px;
    --gb8-radius-xl: 32px;
    --gb8-radius-pill: 999px;

    /* Shadows */
    --gb8-shadow-sm: 0 4px 12px rgba(0, 132, 255, 0.08);
    --gb8-shadow-md: 0 8px 24px rgba(0, 132, 255, 0.12);
    --gb8-shadow-lg: 0 16px 40px rgba(0, 132, 255, 0.18);

    /* Typography */
    --gb8-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --gb8-text-xs: 12px;
    --gb8-text-sm: 14px;
    --gb8-text-md: 16px;
    --gb8-text-lg: 20px;
    --gb8-text-xl: 28px;
    --gb8-text-2xl: 36px;
}

/* Base safe layer */
body {
    font-family: var(--gb8-font-family);
    background: var(--gb8-bg);
    color: var(--gb8-text);
}

/* Reusable primitives */
.gb8-card {
    background: var(--gb8-surface);
    border: 1px solid var(--gb8-border);
    border-radius: var(--gb8-radius-lg);
    box-shadow: var(--gb8-shadow-sm);
}

.gb8-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gb8-space-2);
    border: 0;
    border-radius: var(--gb8-radius-md);
    font-weight: 700;
    font-size: var(--gb8-text-md);
    cursor: pointer;
    text-decoration: none;
}

.gb8-btn-primary {
    background: linear-gradient(135deg, #14c8ff 0%, #006eff 100%);
    color: #ffffff;
    box-shadow: var(--gb8-shadow-md);
}

.gb8-btn-soft {
    background: var(--gb8-primary-soft);
    color: var(--gb8-primary);
}

.gb8-section-title {
    font-size: var(--gb8-text-xl);
    font-weight: 800;
    color: var(--gb8-text);
    text-align: center;
}

.gb8-muted {
    color: var(--gb8-text-muted);
}