@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
    /* Primary Colors */
    --qkb-primary: #2271b1;
    --qkb-primary-dark: #135e96;
    --qkb-primary-light: #2271b180;
    --qkb-primary-rgb: 34, 113, 177;

    /* Status Colors */
    --qkb-error: #dc2626;
    --qkb-error-rgb: 220, 38, 38;
    --qkb-success: #16a34a;
    --qkb-success-rgb: 22, 163, 74;
    --qkb-warning: #f59e0b;
    --qkb-warning-rgb: 245, 158, 11;


    /* Text Colors */
    --qkb-text: #2c3338;
    --qkb-text-light: #646970;
    --qkb-text-dark: #1f2328;
    --qkb-text-muted: #8b949e;

    /* Background Colors */
    --qkb-bg: #ffffff;
    --qkb-bg-light: #f6f7f7;
    --qkb-bg-alt: #fafbfc;
    --qkb-bg-overlay: rgba(255, 255, 255, 0.95);

    /* Border and Shadows */
    --qkb-border: #e1e4e8;
    --qkb-border-light: #f0f2f5;
    --qkb-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    --qkb-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --qkb-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --qkb-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

    /* Radius */
    --qkb-radius-xs: 5px;
    --qkb-radius-sm: 10px;
    --qkb-radius-md: 15px;
    --qkb-radius-lg: 20px;
    --qkb-radius-xl: 25px;

    /* Spacing */
    --qkb-gap: 5px;
    --qkb-gap-md: 10px;
    --qkb-gap-lg: 15px;
    --qkb-gap-xl: 20px;

    /* Padding */
    --qkb-padding: 15px 20px;
    --qkb-padding-md: 10px 15px;
    --qkb-padding-sm: 5px 10px;

    /* Effects */
    --qkb-gradient: linear-gradient(135deg, var(--qkb-primary), var(--qkb-primary-dark));
    --qkb-transition: all 0.5s cubic-bezier(0.5, 0, 0.2, 1);
    --qkb-transform: scale(1.05);
    --qkb-filter: brightness(0) invert(1);
    --qkb-blur: blur(4px);

    /* Typography */
    --qkb-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --qkb-font-size-xs: 10.4px;
    --qkb-font-size-sm: 12px;
    --qkb-font-size-md: 14px;
    --qkb-font-size-lg: 16px;
    --qkb-letter-spacing: 0.8px;


    /* Font Weights */

    --qkb-font-weight-light: 300;
    --qkb-font-weight-normal: 400;
    --qkb-font-weight-medium: 500;
    --qkb-font-weight-semibold: 600;
    --qkb-font-weight-bold: 800;

    /* Z-Index */
    --qkb-z-index-low: 10;
    --qkb-z-index-mid: 50;
    --qkb-z-index-high: 100;
    --qkb-z-index-overlay: 999;
    --qkb-z-index-modal: 1000;
    --qkb-z-index-top: 999999;
}