/**
 * GLOBAL DESIGN TOKENS
 * Use this file to change the entire site's color scheme and typography.
 */
:root {
    /* Primary Brand Colors */
    --brand-pink: #FF4D6D;
    --brand-blue: #38bdf8; /* NEW COMPLEMENTARY BLUE */
    --brand-teal: #5FC3B2;
    --brand-teal-dark: #5ca2b7;
    --brand-teal-light: #c9e9f2;
    
    /* UI Palette */
    --ui-dark: #1A1A1A;
    --ui-dark-grey: #414141;
    --ui-grey: #666666;
    --ui-light-grey: #EBEBEB;
    --ui-white: #FFFFFF;
    --ui-bg: #f1f5f9;
    
    /* Category Colors (CatBoxes) */
    --cat-free: #FF4D6D;
    --cat-ai: #5FC3B2;
    --cat-live: #E97461;
    --cat-premium: #CBA14E;
    --cat-undress: #8B80F9;
    --cat-of: #5B8C94;

    /* Typography - PREMIUM OUTFIT & INTER */
    --font-main: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Outfit', sans-serif;
    
    --font-size-base: 14px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* Spacing & Layout */
    --container-width: 1300px;
    --header-height: 80px;
    --layout-gap: 25px; /* UNIFIED SPACING */
    --radius-pill: 50px;
    --radius-md: 10px;
    --radius-sm: 6px;

    /* Effects */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}