/**
 * General Filters - Base Design System
 * Design variables (colors, typography, spacing)
 * 
 * @package FiveOOD_General_Filters
 */

:root {
    /* ============================================
       TYPOGRAPHY
       ============================================ */
    
    /* Font Families */
    --font-header: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-description: 'Red Hat Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Display (Desktop) */
    --font-size-display: 32px;
    --line-height-display: 80px;
    
    /* Page title (sits between display and h1) */
    --font-size-page-title: 48px;

    /* Headings (Desktop) */
    --font-size-h1: 56px;
    --line-height-h1: 64px;
    
    --font-size-h2: 40px;
    --line-height-h2: 48px;
    
    --font-size-h3: 32px;
    --line-height-h3: 40px;
    
    --font-size-h4: 24px;
    --line-height-h4: 32px;
    
    --font-size-h5: 20px;
    --line-height-h5: 28px;
    
    --font-size-h6: 18px;
    --line-height-h6: 24px;
    
    /* Body Text (Desktop) */
    --font-size-body-lg: 18px;
    --line-height-body-lg: 28px;
    
    --font-size-body-md: 16px;
    --line-height-body-md: 24px;
    
    --font-size-body-sm: 14px;
    --line-height-body-sm: 20px;
    
    --font-size-body-xs: 12px;
    --line-height-body-xs: 16px;
    
    /* ============================================
       PRIMITIVE COLORS
       ============================================ */
    
    /* Neutrals */
    --color-neutral-0: #FFFFFF;
    --color-neutral-10: #F4F5F6;
    --color-neutral-20: #E6E8EA;
    --color-neutral-30: #DCDCDC;
    --color-neutral-40: #B6BCC2;
    --color-neutral-50: #9AA0A0;
    --color-neutral-60: #6F757A;
    --color-neutral-70: #3C4043;
    --color-neutral-80: #2B2F33;
    --color-neutral-90: #121212;
    --color-neutral-100: #000000;
    
    /* Brand / Primary / Green */
    --color-green-10: #F3F4EE;
    --color-green-20: #E1E3D6;
    --color-green-30: #C9CCB6;
    --color-green-40: #AEB39A;
    --color-green-45: #56603D;
    --color-green-50: #4C5139;
    --color-green-60: #3E4330;
    --color-green-70: #2F3324;
    --color-green-80: #1E2217;
    
    /* Brand / Primary / Beige */
    --color-beige-10: #F7F5EF;
    --color-beige-20: #EFECE3;
    --color-beige-30: #D8D4C8;
    --color-beige-40: #BEB8A8;
    
    /* Brand / Accent / Blue */
    --color-blue-10: #D6E5F5;
    --color-blue-20: #B0C6DD;
    --color-blue-30: #5E7FA3;
    --color-blue-40: #33557B;
    
    /* Brand / Accent / Neon Green */
    --color-neon-green: #ACF05A;
    
    /* Brand / Accent / Orange */
    --color-orange-10: #F8F0ED;
    --color-orange-20: #E1C3B7;
    --color-orange-30: #B26749;
    --color-orange-40: #91543B;
    
    /* System Colors */
    --color-success: #2F6B4F;
    --color-success-mid: #6FAE8C;
    --color-success-light: #E6F2EC;
    
    --color-error: #9E2F24;
    --color-error-mid: #D56A5E;
    --color-error-light: #F6E6E4;
    
    --color-warning: #9E6A13;
    --color-warning-mid: #E0A84A;
    --color-warning-light: #F7EEDC;
    
    --color-hyperlink: #33557B;
    --color-hyperlink-mid: #94C0D1;
    --color-hyperlink-alt: #5B3FA3;
    --color-hyperlink-alt-light: #B7A4E6;
    
    /* ============================================
       SEMANTIC COLORS - LIGHT MODE (Default)
       ============================================ */
    
    /* Backgrounds */
    --bg-primary: var(--color-neutral-0);
    --bg-secondary: var(--color-neutral-10);
    --bg-brand-green: var(--color-green-20);
    --bg-brand-green-alt: var(--color-green-40);
    --bg-brand-neutral: var(--color-beige-20);
    --bg-success: var(--color-success-light);
    --bg-error: var(--color-error-light);
    --bg-disabled: var(--color-neutral-10);
    
    /* Text Colors */
    --text-primary: var(--color-neutral-90);
    --text-secondary: var(--color-neutral-80);
    --text-tertiary: var(--color-neutral-80);
    --text-brand-green: var(--color-green-50);
    --text-overline: var(--color-green-50);
    --text-hyperlink-default: var(--color-green-50);
    --text-hyperlink-clicked: var(--color-hyperlink-alt);
    --text-success: var(--color-success);
    --text-error: var(--color-error);
    --text-disabled: var(--color-neutral-50);
    
    /* Border Colors */
    --border-primary: #E6E8EA;
    --border-secondary: #DCDCDC;
    --border-tertiary: #B6BCC2;
    --border-brand: var(--color-green-70);
    --border-success: var(--color-success);
    --border-error: var(--color-error);
    
    /* CTA / Buttons */
    --cta-fg-primary: var(--color-neutral-0);
    --cta-bg-primary: var(--color-green-50);
    --cta-bg-primary-hover: var(--color-green-70);
    --cta-fg-disabled: var(--color-neutral-50);
    --cta-bg-disabled: var(--color-neutral-20);
    
    --cta-outline-default: var(--color-neutral-100);
    --cta-outline-bg-hover: var(--color-green-20);
    --cta-outline-disabled: var(--color-neutral-50);
    
    --cta-tertiary-default: var(--color-green-70);
    --cta-tertiary-hover: var(--color-green-20);
    --cta-tertiary-disabled: var(--color-neutral-50);
    
    /* Input Fields */
    --input-fg-default: var(--color-neutral-60);
    --input-fg-hover: var(--color-neutral-70);
    --input-fg-active: var(--color-neutral-100);
    --input-fg-filled: var(--color-neutral-100);
    --input-fg-error: var(--color-error);
    --input-fg-disabled: var(--color-neutral-50);
    
    --input-bg-default: var(--color-neutral-10);
    --input-bg-hover: var(--color-neutral-10);
    --input-bg-active: var(--color-neutral-10);
    --input-bg-filled: var(--color-neutral-10);
    --input-bg-error: var(--color-neutral-10);
    --input-bg-disabled: var(--color-neutral-10);
    
    /* Top Navigation */
    --topnav-default: var(--color-neutral-90);
    --topnav-hover: var(--color-green-60);
    
    /* Footer Links */
    --footer-link-default: var(--color-neutral-100);
    --footer-link-hover: var(--color-green-60);
    
    /* Icons */
    --icon-system: var(--color-neutral-100);
    --icon-secondary: var(--color-neutral-70);
    --icon-system-inverse: var(--color-neutral-0);
    --icon-brand-green: var(--color-green-50);
    --icon-brand-rust: var(--color-orange-30);
    --icon-disabled: var(--color-neutral-50);
    
    /* ============================================
       SPACING
       ============================================ */
    
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 80px;
    
    /* ============================================
       BORDER RADIUS
       ============================================ */
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* ============================================
       SHADOWS
       ============================================ */
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */

[data-theme="dark"],
.dark-mode {
    /* Backgrounds */
    --bg-primary: var(--color-neutral-100);
    --bg-secondary: var(--color-neutral-90);
    --bg-brand-green: var(--color-green-70);
    --bg-brand-green-alt: var(--color-green-50);
    --bg-disabled: var(--color-neutral-80);
    
    /* Text Colors */
    --text-primary: var(--color-neutral-0);
    --text-secondary: #DCDCDC;
    --text-tertiary: #B6BCC2;
    --text-brand-green: var(--color-green-20);
    --text-hyperlink-default: var(--color-orange-30);
    --text-hyperlink-clicked: var(--color-hyperlink-alt-light);
    --text-disabled: var(--color-neutral-70);
    
    /* Border Colors */
    --border-primary: var(--color-neutral-80);
    --border-secondary: var(--color-neutral-80);
    --border-tertiary: var(--color-neutral-70);
    --border-brand: var(--color-green-60);
    
    /* CTA / Buttons */
    --cta-fg-primary: var(--color-neutral-0);
    --cta-bg-primary: var(--color-orange-30);
    --cta-bg-primary-hover: var(--color-orange-40);
    --cta-fg-disabled: var(--color-neutral-60);
    --cta-bg-disabled: var(--color-neutral-80);
    
    /* Icons */
    --icon-system: var(--color-neutral-0);
    --icon-secondary: var(--color-neutral-50);
    --icon-brand-green: var(--color-neon-green);
    --icon-brand-rust: var(--color-orange-20);
    --icon-disabled: var(--color-neutral-70);
    
    /* Top Navigation */
    --topnav-default: var(--color-neutral-10);
    --topnav-hover: var(--color-green-40);
    
    /* Footer Links */
    --footer-link-default: var(--color-neutral-0);
    --footer-link-hover: var(--color-green-40);
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    :root {
        --font-size-display: 56px;
        --line-height-display: 64px;
        
        --font-size-h1: 48px;
        --line-height-h1: 56px;
        
        --font-size-h2: 36px;
        --line-height-h2: 44px;
        
        --font-size-h3: 28px;
        --line-height-h3: 36px;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    :root {
        --font-size-display: 40px;
        --line-height-display: 48px;
        
        --font-size-h1: 32px;
        --line-height-h1: 40px;
        
        --font-size-h2: 28px;
        --line-height-h2: 36px;
        
        --font-size-h3: 24px;
        --line-height-h3: 32px;
        
        --font-size-h4: 20px;
        --line-height-h4: 28px;
        
        --font-size-h5: 18px;
        --line-height-h5: 24px;
    }
}

/* ============================================
   WORDPRESS PAGE TITLES
   ============================================ */

h1.wp-block-post-title,
body.page .entry-title,
body.page .page-title {
    display: none !important;
}