/**
 * BioScript Template Design System (Premium Tokens)
 * Defines category-specific visual identities via CSS variables.
 */

:root {
    /* --- Base Tokens (Generic Defaults) --- */
    --bsb-font-display: 'Inter', system-ui, sans-serif;
    --bsb-font-body: 'Inter', system-ui, sans-serif;
    
    --bsb-radius-sm: 8px;
    --bsb-radius-md: 16px;
    --bsb-radius-lg: 32px;
    --bsb-radius-full: 9999px;

    --bsb-space-xs: 0.5rem;
    --bsb-space-sm: 1rem;
    --bsb-space-md: 2rem;
    --bsb-space-lg: 4rem;
    --bsb-space-xl: 8rem;

    --bsb-shadow-ambient: 0 20px 40px -10px rgba(0,0,0,0.2);
    --bsb-border-glass: 1px solid rgba(255,255,255,0.08);
}

/* --- Category Overrides --- */

/* 1. CREATOR: Personal, Warm, Compact */
[data-category="creator"] {
    --bsb-radius-md: 24px;
    --bsb-space-md: 1.5rem;
    --bsb-font-display: 'Outfit', 'Inter', sans-serif; /* Soft but modern */
    --bsb-card-bg: rgba(255,255,255,0.05);
}

/* 2. INFLUENCER: Editorial, Luxury, Media-rich */
[data-category="influencer"] {
    --bsb-space-lg: 6rem;
    --bsb-radius-md: 0px; /* Sharp editorial look */
    --bsb-font-display: 'Playfair Display', serif; /* Or high-end sans like Montserrat */
    --bsb-letter-spacing: -0.05em;
}

/* 3. AGENCY: Authoritative, Polished, Grid */
[data-category="agency"] {
    --bsb-radius-md: 12px;
    --bsb-font-display: 'Inter', sans-serif;
    --bsb-heading-weight: 900;
    --bsb-card-border: 1px solid rgba(255,255,255,0.1);
}

/* 4. BUSINESS: Crisp, Conversion-led */
[data-category="business"] {
    --bsb-radius-md: 8px;
    --bsb-font-display: 'Plus Jakarta Sans', sans-serif;
    --bsb-shadow-active: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 5. PORTFOLIO: Elegant, Spatial, Curated */
[data-category="portfolio"] {
    --bsb-space-lg: 8rem;
    --bsb-radius-md: 0px;
    --bsb-font-display: 'Syncopate', sans-serif;
    --bsb-bg-color: #000;
}

/* 6. MINIMAL: Refined, Restrained */
[data-category="minimal"] {
    --bsb-space-lg: 10rem;
    --bsb-font-body: 'Inter', sans-serif;
    --bsb-text-muted: rgba(255,255,255,0.4);
}

/* 7. PREMIUM SHOWCASE: Cinematic, Layered */
[data-category="premium"] {
    --bsb-shadow-cinematic: 0 30px 60px -12px rgba(0,0,0,0.5);
    --bsb-glass-blur: 24px;
}

/* --- Layout Utilities --- */
.bsb-links {
    display: flex;
    flex-direction: column;
    gap: var(--bsb-space-sm);
}

.bsb-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--bsb-space-sm);
}

/* Mobile-First Reset */
@media (max-width: 640px) {
    :root {
        --bsb-space-lg: 2.5rem;
        --bsb-space-xl: 4rem;
    }
}