:root {
    /* Colors - Primary */
    --primary-gradient: linear-gradient(135deg, #14b8a6, #10b981);
    --primary-solid: #06b6d4;
    --primary-glow: rgba(6, 182, 212, 0.4);

    /* Extended Primary Gradients */
    --login-header-gradient: linear-gradient(135deg, #0d9488 0%, #14b8a6 35%, #10b981 70%, #06b6d4 100%);
    --login-button-gradient: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #10b981 100%);
    --login-border-gradient: linear-gradient(90deg, #06b6d4, #14b8a6, #10b981);
    --login-card-bg: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 50%, #f0fdfa 100%);

    /* Sidebar Colors - Design System */
    --sidebar-bg-gradient: linear-gradient(180deg, #1a472a 0%, #0d2818 100%);
    --sidebar-header-bg: rgba(0,0,0,0.15);
    --sidebar-header-border: rgba(255,255,255,0.1);
    --sidebar-icon-color: #4ade80;
    --sidebar-link-color: rgba(255,255,255,0.85);
    --sidebar-link-hover-bg: rgba(74, 222, 128, 0.1);
    --sidebar-link-active-bg: rgba(74, 222, 128, 0.15);
    --sidebar-link-active-color: #4ade80;
    --sidebar-link-active-border: #4ade80;
    --sidebar-overlay: rgba(0, 0, 0, 0.5);

    /* Background Colors */
    --body-bg: #f8f9fa;
    --card-bg: #ffffff;
    --topbar-bg: #ffffff;
    --topbar-header-bg: #f9fafb;
    --filter-card-bg: #f8f9fa;
    --table-header-bg: #f8f9fa;
    --table-row-hover: #f8f9fa;
    --input-bg-focus: #f9fafb;

    /* Text Colors */
    --text-primary: #374151;
    --text-heading: #1f2937;
    --text-muted: #6b7280;
    --page-header-title: #1a1a1a;
    --page-header-subtitle: #6c757d;
    --table-header-text: #495057;
    --section-title: #2c3e50;
    --topbar-icon-color: #4b5563;
    --topbar-icon-hover: #14b8a6;
    --text-white: #ffffff;

    /* Border Colors */
    --border-topbar: #e5e7eb;
    --border-card: #f1f3f4;
    --border-table: #dee2e6;
    --border-table-row: #f1f3f4;
    --border-input: #d1d5db;
    --border-input-focus: #14b8a6;
    --border-login: rgba(20, 184, 166, 0.2);
    --border-login-input: rgba(20, 184, 166, 0.3);
    --border-user-btn: #e5e7eb;
    --border-user-btn-hover: #14b8a6;
    --border-dropdown: #e5e7eb;

    /* Status Colors & Gradients */
    --warning-soft-bg: rgba(245,158,11,0.12);
    --text-warning: #f59e0b;
    --text-danger: #dc2626;
    --bg-danger-hover: #fef2f2;
    --badge-notification: #ef4444;
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    --gradient-danger: linear-gradient(135deg, #dc3545 0%, #c82333 100%);

    /* Stat Card Gradients */
    --gradient-stat-earnings: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-stat-deductions: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    --gradient-stat-basic: linear-gradient(135deg, #14b8a6 0%, #10b981 100%);
    --gradient-stat-allowance: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-stat-overtime: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fs-base: 14px;
    --fs-sidebar: 0.9rem;
    --fs-sidebar-header: 1.1rem;
    --fs-h1: 1.75rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.25rem;
    --fs-h4: 1.1rem;
    --fs-h5: 1rem;
    --fs-h6: 0.875rem;
    --fs-small: 0.8125rem;

    /* Standard Spacing */
    --spacing-main: 20px;
    --padding-card: 25px;
    --padding-card-header: 20px 25px;
    --padding-input: 0.5rem 0.75rem;
    --padding-btn-login: 12px 30px;

    /* Compact Spacing - For denser layouts */
    --spacing-compact-main: 20px;
    --spacing-compact-card: 20px;
    --spacing-compact-card-header: 15px 20px;
    --spacing-compact-sidebar-link: 8px 16px;
    --spacing-compact-table-cell: 0.75rem;
    --spacing-compact-welcome: 20px;
    --spacing-compact-stat-card: 15px;

    /* Border Radius */
    --radius-card: 12px;
    --radius-btn: 8px;
    --radius-input: 8px;
    --radius-login-card: 20px;

    /* Shadows */
    --shadow-card: 0 3px 12px rgba(0,0,0,0.1);
    --shadow-card-hover: 0 6px 20px rgba(0,0,0,0.15);
    --shadow-login-card: 0 8px 32px rgba(20, 184, 166, 0.2);
    --shadow-dropdown: 0 10px 40px rgba(0,0,0,0.12);
    --shadow-btn-hover: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-topbar: 0 1px 3px rgba(0,0,0,0.05);

    /* Transitions */
    --transition-base: 0.2s ease;
    --transition-sidebar: 0.3s ease;

    /* Layout - Sidebar Width */
    --sidebar-width: 260px;
    --sidebar-width-laptop: 220px;
}