/* K2 Hub CRM — CSS Variables (Design Tokens)
   Based on k2-promo.company brand identity */

:root {
    /* Primary K2 Blue */
    --k2-blue: #005c9a;
    --k2-blue-light: #0074c2;
    --k2-blue-dark: #004a7a;
    --k2-blue-50: rgba(0, 92, 154, 0.06);
    --k2-blue-100: rgba(0, 92, 154, 0.12);

    /* Accent K2 Orange */
    --k2-orange: #f35609;
    --k2-orange-hover: #f87535;
    --k2-orange-active: #dd4e08;
    --k2-orange-50: rgba(243, 86, 9, 0.08);

    /* Backgrounds */
    --k2-bg: #ffffff;
    --k2-bg-secondary: #f5f5f7;
    --k2-bg-tertiary: #eef0f4;

    /* Surfaces (cards, modals) */
    --k2-surface: #ffffff;
    --k2-surface-hover: #f8f9fb;
    --k2-surface-active: #f0f1f5;

    /* Text */
    --k2-text: #1e1e1e;
    --k2-text-secondary: #555555;
    --k2-text-muted: #999999;
    --k2-text-inverse: #ffffff;

    /* Borders */
    --k2-border: #e5e7eb;
    --k2-border-light: #f0f0f2;
    --k2-border-focus: var(--k2-blue);

    /* Status colors */
    --k2-success: #10b981;
    --k2-success-bg: rgba(16, 185, 129, 0.1);
    --k2-warning: #f59e0b;
    --k2-warning-bg: rgba(245, 158, 11, 0.1);
    --k2-error: #ef4444;
    --k2-error-bg: rgba(239, 68, 68, 0.1);
    --k2-info: var(--k2-blue);
    --k2-info-bg: var(--k2-blue-50);

    /* Shadows */
    --k2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --k2-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --k2-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --k2-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
    --k2-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12);

    /* Border Radius */
    --k2-radius-sm: 6px;
    --k2-radius: 10px;
    --k2-radius-md: 12px;
    --k2-radius-lg: 16px;
    --k2-radius-xl: 20px;
    --k2-radius-full: 9999px;

    /* Spacing */
    --k2-space-xs: 4px;
    --k2-space-sm: 8px;
    --k2-space-md: 16px;
    --k2-space-lg: 24px;
    --k2-space-xl: 32px;
    --k2-space-2xl: 48px;

    /* Typography */
    --k2-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --k2-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;

    /* Sidebar */
    --sidebar-width: 260px;
    --sidebar-collapsed: 70px;
    --header-height: 60px;

    /* Transitions */
    --k2-transition: all 0.2s ease;
    --k2-transition-slow: all 0.3s ease;
}