/* ===== CRM DESIGN SYSTEM VARIABLES ===== */
:root {
    /* Font Families */
    --font-primary: 'Inter', sans-serif;          /* Body text */
    --font-mono: 'JetBrains Mono', monospace;     /* Headers, amounts */
    --font-icons: 'Font Awesome 5 Free';          /* Icons */

    /* Font Sizes - Exact V1 Values */
    --font-3xl: 3rem;        /* 48px - Empty state icons */
    --font-2xl: 2rem;        /* 32px - KPI values, feature icons */
    --font-xl: 1.5rem;       /* 24px - Large action icons */
    --font-lg: 1.25rem;      /* 20px - Header icons */
    --font-base: 1rem;       /* 16px - Standard text icons */
    --font-sm: 0.875rem;     /* 14px - Button icons, table text */
    --font-xs: 0.75rem;      /* 12px - Small inline icons, badges */

    /* Specialized Sizes */
    --form-title-size: 1.1rem;     /* 17.6px - Form section titles */
    --form-label-size: 0.95rem;    /* 15.2px - Form labels */
    --form-input-size: 0.95rem;    /* 15.2px - Form controls */
    --nav-link-size: 0.9rem;       /* 14.4px - Sidebar navigation */

    /* Font Weights */
    --weight-normal: 400;     /* Body text */
    --weight-medium: 500;     /* Form labels, navigation */
    --weight-semibold: 600;   /* Headers, table headers */
    --weight-bold: 700;       /* KPI values */
    --weight-black: 900;      /* Icons */

    /* Letter Spacing */
    --header-spacing: -0.02em;     /* Monospace headers */
    --table-spacing: 0.5px;        /* Table headers, badges */
    --badge-spacing: 0.5px;        /* Status badges */
    
    /* WCAG AA Compliant Colors (4.5:1+ contrast ratio) */
    
    /* Light Mode - High Contrast Colors */
    --text-primary-light: #000000;        /* Black - 21:1 contrast */
    --text-secondary-light: #374151;      /* Dark gray - 11.7:1 contrast */
    --text-muted-light: #4B5563;         /* Medium gray - 8.7:1 contrast */
    --text-link-light: #1D4ED8;          /* Dark blue - 7.2:1 contrast */
    --bg-primary-light: #FFFFFF;         /* White background */
    --bg-secondary-light: #F9FAFB;       /* Off-white */
    --bg-elevated-light: #FFFFFF;        /* White for cards/modals */

    /* Dark Mode - High Contrast Colors */
    --text-primary-dark: #FFFFFF;        /* White - 21:1 contrast */
    --text-secondary-dark: #E5E7EB;      /* Light gray - 13.4:1 contrast */
    --text-muted-dark: #D1D5DB;         /* Medium light gray - 10.1:1 contrast */
    --text-link-dark: #60A5FA;          /* Light blue - 6.8:1 contrast */
    --bg-primary-dark: #111827;         /* Near black background */
    --bg-secondary-dark: #1F2937;       /* Dark gray */
    --bg-elevated-dark: #1F2937;        /* Dark gray for cards/modals */

    /* Status Colors - WCAG Compliant */
    --success-light: #047857;           /* Dark green - 5.4:1 contrast */
    --success-dark: #34D399;            /* Light green - 5.1:1 contrast */
    --warning-light: #92400E;           /* Dark orange - 6.2:1 contrast */
    --warning-dark: #FBBF24;            /* Light yellow - 7.3:1 contrast */
    --danger-light: #B91C1C;            /* Dark red - 5.9:1 contrast */
    --danger-dark: #F87171;             /* Light red - 5.2:1 contrast */
    --info-light: #1E40AF;              /* Dark blue - 6.8:1 contrast */
    --info-dark: #60A5FA;               /* Light blue - 6.8:1 contrast */

    /* Brand Colors (Lit & Luz Palette) */
    --ll-yellow: #F4D03F;
    --ll-coral: #E85A4F;
    --ll-cream: #FEFEFE;
    --ll-dark: #1A1A1A;
    --ll-gray: #6B7280;
    --ll-light-gray: #F3F4F6;
    --ll-border: #E5E7EB;

    /* Spacing System - Exact V1 Values */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 0.75rem;    /* 12px */
    --spacing-lg: 1rem;       /* 16px */
    --spacing-xl: 1.5rem;     /* 24px */
    --spacing-2xl: 2rem;      /* 32px */
    --spacing-3xl: 3rem;      /* 48px */

    /* Border Radius System */
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;

    /* Shadow System */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* Button Text Color System */
    --btn-text-primary: #333333;        /* Dark text for light backgrounds */
    --btn-text-secondary: #6c757d;      /* Muted text for secondary buttons */
    --btn-text-on-color: #ffffff;       /* White text for colored backgrounds */
}