/**
 * CPB Theme - Design System Variables
 * 
 * Centralized color palette, typography, spacing, and other design tokens.
 * All theme styles should reference these CSS custom properties for consistency.
 * 
 * Usage: var(--variable-name)
 * Example: color: var(--color-primary);
 */

:root {
    /* ==========================================
       PRIMARY COLORS
       ========================================== */
    --color-primary: #5cb85c;
    --color-primary-hover: #4cae4c;
    --color-primary-light: #6cc96c;
    --color-primary-dark: #3d9a3d;
    
    /* ==========================================
       SECONDARY COLORS
       ========================================== */
    --color-secondary: #ff6b35;
    --color-secondary-hover: #ff5520;
    --color-secondary-light: #ff8555;
    
    /* ==========================================
       ACCENT COLORS
       ========================================== */
    --color-accent-purple: #667eea;
    --color-accent-purple-dark: #764ba2;
    --color-accent-orange: #f59e0b;
    --color-accent-warning: #ffc107;
    
    /* ==========================================
       NEUTRAL COLORS
       ========================================== */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-dark: #2c3e50;
    --color-gray-dark: #666666;
    --color-gray: #999999;
    --color-gray-light: #cccccc;
    --color-gray-lighter: #e0e0e0;
    --color-gray-lightest: #f0f0f0;
    
    /* ==========================================
       BACKGROUND COLORS
       ========================================== */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-light-beige: #faf9f5;
    --bg-beige: #f5e6d3;
    --bg-beige-hover: #e8d5bb;
    --bg-dark: #2c3e50;
    
    /* ==========================================
       TEXT COLORS
       ========================================== */
    --text-primary: #2c3e50;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-light: #ffffff;
    --text-beige: #8b6f47;
    --text-beige-hover: #6d5838;
    
    /* ==========================================
       BORDER COLORS
       ========================================== */
    --border-light: #f0f0f0;
    --border-gray: #e0e0e0;
    --border-dark: #cccccc;
    
    /* ==========================================
       SHADOWS
       ========================================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.2);
    
    /* Color-specific shadows */
    --shadow-primary: 0 4px 12px rgba(92, 184, 92, 0.3);
    --shadow-primary-hover: 0 4px 12px rgba(92, 184, 92, 0.5);
    --shadow-secondary: 0 4px 12px rgba(255, 107, 53, 0.4);
    --shadow-beige: 0 4px 12px rgba(139, 111, 71, 0.2);
    
    /* ==========================================
       TYPOGRAPHY - FONT FAMILIES
       ========================================== */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-secondary: Georgia, 'Times New Roman', serif;
    --font-monospace: 'Courier New', Courier, monospace;
    
    /* ==========================================
       TYPOGRAPHY - FONT SIZES
       ========================================== */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.85rem;      /* 13.6px */
    --font-size-base: 0.9rem;     /* 14.4px */
    --font-size-md: 0.95rem;      /* 15.2px */
    --font-size-lg: 1rem;         /* 16px */
    --font-size-xl: 1.05rem;      /* 16.8px */
    --font-size-2xl: 1.1rem;      /* 17.6px */
    --font-size-3xl: 1.3rem;      /* 20.8px */
    --font-size-4xl: 1.5rem;      /* 24px */
    --font-size-5xl: 2rem;        /* 32px */
    --font-size-6xl: 2.5rem;      /* 40px */
    --font-size-7xl: 3rem;        /* 48px */
    
    /* ==========================================
       TYPOGRAPHY - FONT WEIGHTS
       ========================================== */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* ==========================================
       TYPOGRAPHY - LINE HEIGHTS
       ========================================== */
    --line-height-tight: 1.2;
    --line-height-snug: 1.3;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.5;
    --line-height-loose: 1.6;
    --line-height-extra-loose: 1.8;
    
    /* ==========================================
       SPACING
       ========================================== */
    --spacing-xs: 0.25rem;     /* 4px */
    --spacing-sm: 0.5rem;      /* 8px */
    --spacing-md: 1rem;        /* 16px */
    --spacing-lg: 1.5rem;      /* 24px */
    --spacing-xl: 2rem;        /* 32px */
    --spacing-2xl: 3rem;       /* 48px */
    --spacing-3xl: 4rem;       /* 64px */
    --spacing-4xl: 5rem;       /* 80px */
    
    /* ==========================================
       BORDER RADIUS
       ========================================== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 15px;
    --radius-3xl: 20px;
    --radius-full: 50%;
    --radius-pill: 9999px;
    
    /* ==========================================
       TRANSITIONS
       ========================================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* ==========================================
       Z-INDEX LAYERS
       ========================================== */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    
    /* ==========================================
       LAYOUT
       ========================================== */
    --container-max-width: 1200px;
    --container-padding: 15px;
    --section-padding-y: 60px;
    
    /* ==========================================
       CARD STYLES
       ========================================== */
    --card-bg: var(--color-white);
    --card-border-radius: var(--radius-2xl);
    --card-padding: 20px;
    --card-shadow: var(--shadow-md);
    --card-shadow-hover: var(--shadow-lg);
    
    /* ==========================================
       BUTTON STYLES
       ========================================== */
    --btn-padding-y: 10px;
    --btn-padding-x: 24px;
    --btn-border-radius: var(--radius-lg);
    --btn-font-weight: var(--font-weight-semibold);
    --btn-transition: var(--transition-normal);
    
    /* ==========================================
       FORM STYLES
       ========================================== */
    --input-border: 1px solid var(--border-gray);
    --input-border-radius: var(--radius-md);
    --input-padding-y: 10px;
    --input-padding-x: 15px;
    --input-focus-border: var(--color-primary);
    
    /* ==========================================
       LOGO SIZES
       ========================================== */
    --logo-size-sm: 50px;
    --logo-size-md: 60px;
    --logo-size-lg: 80px;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Text color utilities */
.text-primary-green {
    color: var(--color-primary) !important;
}

.text-secondary-orange {
    color: var(--color-secondary) !important;
}

/* Background utilities */
.bg-light-beige {
    background-color: var(--bg-light-beige) !important;
}

.bg-secondary-light {
    background-color: var(--bg-secondary) !important;
}

/* Hover state utilities */
.hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}