/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
    /* Typography */
    --font-heading: 'Gabarito', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Host Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-navigation: 'Gabarito', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-buttons: 'Gabarito', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Font Sizes */
    --font-size-nav: 1.125rem;  /* Added for larger navigation text (18px) */
    
    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;  /* Added for Gabarito 900 weight */
    
    /* Colors */
    --color-primary: #cc0000;
    --color-text: #333;
    --color-text-light: #666;
    --color-background: #fff;
    --color-white: #fff;
    --color-black: #000;
    --color-gray: #d6d6d6;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    
    /* Layout */
    --container-max-width: 1200px;
    --container-padding: 20px;
    --header-height: 64px;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-header: 1000;
    --z-overlay: 2000;
    
    /* Breakpoints */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1200px;
}

@font-face {
    font-family: 'Host Grotesk';
    font-display: swap;
    src: local('Arial');
}

/* Custom Media Queries */
@custom-media --mobile (max-width: 768px);
@custom-media --tablet (min-width: 769px) and (max-width: 1024px);
@custom-media --desktop (min-width: 1025px);

/* Button Styles */
.association-item,
.genres-list {
    font-family: var(--font-buttons);
    font-weight: var(--font-bold);
}

.genres-list {
    text-transform: capitalize;
}

/* Navigation Styles */
.nav-item {
    font-family: var(--font-navigation);
    font-weight: var(--font-bold);
    font-size: var(--font-size-nav);
}