/* ========================================
   🎨 KONTROL PORTAL - CSS VARIABLES
   Theme-Independent Custom Properties with Inheritance Strategy
   Version: 10.2.0
   ======================================== */

:root {
    /* ===================================
       BASE COLORS
       Strategy: Theme Variable -> Plugin Default (Neutral/Greys)
       =================================== */
    
    /* Primary Accent: Buttons, links, active states */
    /* Fallback: Charcoal Grey (Neutral and Professional) */
    --kp-primary-accent: var(--wp--preset--color--primary, #374151);
    
    /* Secondary Accent: Headings, dark elements */
    /* Fallback: Slate Grey */
    --kp-secondary-accent: var(--wp--preset--color--secondary, #4b5563);
    
    /* Main Background: Cards, containers */
    --kp-site-bg: var(--wp--preset--color--background, #ffffff);
    
    /* Light Background: Filters, headers, subtle areas */
    /* Tries to grab a 'light' preset, otherwise falls back to off-white */
    --kp-light-bg: var(--wp--preset--color--light, #f9fafb);
    
    /* Text Color */
    --kp-text-color: var(--wp--preset--color--foreground, var(--wp--preset--color--text, #1f2937));
    
    /* Border Color */
    --kp-border-color: var(--wp--preset--color--border, rgba(0, 0, 0, 0.1));
    
    /* ===================================
       STATUS BADGE COLORS
       (Kept as plugin defaults for specific semantic contrast, unless overridden)
       =================================== */
    
    /* New / New Application - Yellow */
    --kp-status-new-bg: #fff3cd;
    --kp-status-new-text: #856404;
    
    /* In Process / Invoice Issued - Blue */
    --kp-status-in-process-bg: #cfe2ff;
    --kp-status-in-process-text: #084298;
    --kp-status-invoice-issued-bg: #cfe2ff;
    --kp-status-invoice-issued-text: #084298;
    
    /* Awaiting Client Docs - Red */
    --kp-status-awaiting-docs-bg: #f8d7da;
    --kp-status-awaiting-docs-text: #721c24;
    
    /* Awaiting Review / Payment Received - Green */
    --kp-status-awaiting-review-bg: #d4edda;
    --kp-status-awaiting-review-text: #155724;
    --kp-status-payment-received-bg: #d1e7dd;
    --kp-status-payment-received-text: #0a3622;
    
    /* Docs Under Review - Teal */
    --kp-status-docs-review-bg: #d1f2eb;
    --kp-status-docs-review-text: #0c5460;
    
    /* Final Review - Purple */
    --kp-status-final-review-bg: #e2d9f3;
    --kp-status-final-review-text: #563d7c;
    
    /* Complete - Green/Teal */
    --kp-status-complete-bg: #d1e7dd;
    --kp-status-complete-text: #0a3622;
    
    /* On Hold / Cancelled - Gray */
    --kp-status-on-hold-bg: #e2e3e5;
    --kp-status-on-hold-text: #383d41;
    --kp-status-cancelled-bg: #e2e3e5;
    --kp-status-cancelled-text: #383d41;
    
    /* ===================================
       BUTTON COLORS
       Inherits from Base Colors defined above
       =================================== */
    
    /* Primary Buttons */
    --kp-btn-primary-bg: var(--kp-primary-accent);
    --kp-btn-primary-text: #ffffff;
    --kp-btn-primary-hover: var(--kp-secondary-accent); /* Simple fallback hover */
    
    /* Secondary Buttons */
    --kp-btn-secondary-bg: #6c757d;
    --kp-btn-secondary-text: #ffffff;
    --kp-btn-secondary-hover: #5a6268;
    
    /* Button Shape */
    --kp-btn-border-radius: 4px;
    --kp-btn-padding: 10px 20px;
    
    /* ===================================
       TYPOGRAPHY
       Strategy: Inherit Theme Font Family -> Fallback to System Fonts
       =================================== */
       
    --kp-font-family: var(--wp--preset--font-family--base, var(--wp--preset--font-family--system, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));
    
    --kp-font-size-base: var(--wp--preset--font-size--medium, 14px);
    --kp-font-size-heading: var(--wp--preset--font-size--xlarge, 24px);
    --kp-font-size-small: var(--wp--preset--font-size--small, 12px);
    
    --kp-font-weight-normal: 400;
    --kp-font-weight-semibold: 600;
    --kp-font-weight-bold: 700;
    --kp-letter-spacing: 0.3px;
    
    /* ===================================
       SPACING & LAYOUT
       =================================== */
    
    --kp-container-padding: 50px 40px 40px 40px;
    --kp-container-padding-mobile: 30px 20px 30px 20px;
    --kp-card-padding: 25px;
    --kp-card-padding-mobile: 20px;
    --kp-grid-gap: 30px;
    --kp-grid-gap-mobile: 20px;
    --kp-section-spacing: 30px;
    
    --kp-container-max-width: 1600px;
    --kp-sidebar-width-list: 300px;
    --kp-sidebar-width-detail: 400px;
    
    /* ===================================
       BORDERS & SHADOWS
       =================================== */
    
    --kp-radius-card: 8px;
    --kp-radius-button: 4px;
    --kp-radius-input: 4px;
    --kp-radius-badge: 4px;
    
    --kp-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.04);
    --kp-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.08);
    --kp-shadow-heavy: 0 8px 16px rgba(0, 0, 0, 0.1);
    
    /* ===================================
       ANIMATIONS
       =================================== */
    
    --kp-transition-fast: 0.15s ease;
    --kp-transition-normal: 0.2s ease;
    --kp-transition-slow: 0.3s ease;
}