:root {
    /* THE GLOBAL BRAND COLORS (Solid HEX for Absolute Compatibility) */
    --color-primary: #E60C0C;
    --color-graphite: #222427;
    --color-bg-dark: #0A0A0A;
    --color-off-white: #FAFFFF;
    --color-neon-red: #FF3333;
}

/* Semantic aliases — map purpose to brand colors */
:root {
    --color-surface: var(--color-bg-dark);
    --color-surface-raised: var(--color-graphite);
    --color-text-primary: var(--color-off-white);
    --color-text-muted: rgba(250, 255, 255, 0.60);
    --color-border: rgba(255, 255, 255, 0.05);
    --color-accent: var(--color-primary);
    --color-accent-muted: var(--color-neon-red);

    /* Spacing scale — 4px base */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* Typography scale — defined only, NOT applied in Phase 2 */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
}

/* =============================================================
   TYPOGRAPHY SCALE
   Apply to structural headings only — not every text element.
   ============================================================= */

.type-h1 {
    font-family: var(--font-display, 'Montserrat', sans-serif);
    font-size: var(--text-4xl, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
}

.type-h2 {
    font-family: var(--font-display, 'Montserrat', sans-serif);
    font-size: var(--text-3xl, 1.875rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}

.type-h3 {
    font-family: var(--font-display, 'Montserrat', sans-serif);
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.type-h4 {
    font-size: var(--text-xl, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
}

.type-body {
    font-size: var(--text-base, 1rem);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.type-small {
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* =============================================================
   SKELETON LOADING SHIMMER
   Apply .skeleton to placeholder elements. No JS needed.
   ============================================================= */

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-surface-raised, #222427) 25%,
        var(--color-graphite, #3a3d41) 50%,
        var(--color-surface-raised, #222427) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 0.25rem;
}

/* =============================================================
   ERROR STATE CARD
   Used by bike-page.js and any JS-rendered section on failure.
   ============================================================= */

.error-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4, 1rem);
    padding: var(--space-12, 3rem);
    background: var(--color-surface-raised);
    border-radius: 1rem;
    text-align: center;
    color: var(--color-text-muted);
}

.error-card .error-icon {
    font-size: 3rem;
    color: var(--color-accent);
}

.error-card .error-title {
    font-size: var(--text-xl, 1.25rem);
    font-weight: 700;
    color: var(--color-text-primary);
}

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}