@import url('kfwinator/ui.css');
@import url('kfwinator/menu.css');
@import url('kfwinator/buttons.css');
@import url('kfwinator/forms.css');
@import url('kfwinator/tables.css');
@import url('kfwinator/cards.css');
@import url('kfwinator/navigation.css');
@import url('kfwinator/feedback.css');

:root {
    --background-color: #ffffff;
    --primary-color: #2563eb;
    --primary-color-lighter: #3b82f6;
    --primary-color-darker: #1d4ed8;
    --success-color: #10b981;
    --success-color-darker: #059669;
    --warning-color: #f59e0b;
    --warning-color-darker: #d97706;
    --danger-color: #ef4444;
    --danger-color-darker: #dc2626;
    --primary-rgb: 37, 99, 235;
    --success-rgb: 16, 185, 129;
    --warning-rgb: 245, 158, 11;
    --danger-rgb: 239, 68, 68;
    --success-dark-rgb: 5, 150, 105;
    --warning-dark-rgb: 217, 119, 6;
    --danger-dark-rgb: 220, 38, 38;
    --body-background: #f0f4f8;
    --font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-size-base: 14px;
    --font-size-large: 1.125rem;
    --font-size-small: 0.8125rem;
    --font-color-rgb: 30, 41, 59;
    --font-color: #1e293b;
    --font-color-light: #64748b;
    --font-btn-primary: #ffffff;
    --font-line-height: 1.55;
    --spacing-small: 8px;
    --spacing-medium: 16px;
    --spacing-large: 24px;
    --global-radius: 8px;
    --border-color: #e4e8ef;
    --global-border: 1px solid #e4e8ef;
    --table-cell-border: 1px solid #eef1f5;
    --primary-border: 1px solid rgba(37, 99, 235, 0.3);
    --box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --container-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
    --input-shadow: none;
    --gradient-radial-background: rgba(15, 23, 42, 0.55);
    --content-shadow: none;
    --global-transition: all 0.18s ease;
    --headbar-height: 60px;
    --navbar-width: 280px;
    --navbar-compressed-width: 72px;
    --navbar-horizontal-height: 52px;
    --headbar-background: #ffffff;
    --headbar-font-color: #1e293b;
    --logo-background: #ffffff;
    --logo-border: 1px solid #eef1f5;
    --navbar-background: #ffffff;
    --navbar-font-color: #64748b;
    --navbar-border: 1px solid #e4e8ef;
    --notification-panel-width: 400px;
    --input-height: 38px;
    --button-height: 36px;
}

html.dark {
    --background-color: #141b2d;
    --primary-color: #60a5fa;
    --primary-color-lighter: #93c5fd;
    --primary-color-darker: #3b82f6;
    --success-color: #34d399;
    --success-color-darker: #10b981;
    --warning-color: #fbbf24;
    --warning-color-darker: #f59e0b;
    --danger-color: #f87171;
    --danger-color-darker: #ef4444;
    --primary-rgb: 96, 165, 250;
    --success-rgb: 52, 211, 153;
    --warning-rgb: 251, 191, 36;
    --danger-rgb: 248, 113, 113;
    --success-dark-rgb: 16, 185, 129;
    --warning-dark-rgb: 245, 158, 11;
    --danger-dark-rgb: 239, 68, 68;
    --body-background: #0b1120;
    --font-color-rgb: 241, 245, 249;
    --font-color: #f1f5f9;
    --font-color-light: #94a3b8;
    --font-btn-primary: #ffffff;
    --border-color: #222c42;
    --global-border: 1px solid #222c42;
    --table-cell-border: 1px solid #1a2237;
    --primary-border: 1px solid rgba(96, 165, 250, 0.4);
    --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --container-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.25);
    --input-shadow: none;
    --gradient-radial-background: rgba(11, 17, 32, 0.72);
    --headbar-background: #141b2d;
    --headbar-font-color: #f1f5f9;
    --logo-background: #141b2d;
    --logo-border: 1px solid #1a2237;
    --navbar-background: #141b2d;
    --navbar-font-color: #94a3b8;
    --navbar-border: 1px solid #222c42;
}