@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
@import url('../../default/css/tokens.css');

:root {
    --color-primary: #6b93c4;
    --color-primary-hover: #5f82af;
    --color-background-light: #eff3f7;
    --color-background-dark: #0f141b;
    --color-surface-light: #fbfcfe;
    --color-surface-dark: #171d26;
    --color-surface-muted: #e6edf4;
    --color-surface-subtle: #dbe4ee;
    --color-surface-muted-dark: #202835;
    --color-surface-subtle-dark: #293343;
    --color-border-light: #c6d2e0;
    --color-border-dark: #2f3948;
    --color-border-strong: #9db0c4;
    --color-border-strong-dark: #465567;
    --color-field-bg-light: #f6f9fc;
    --color-field-bg-dark: #131923;
    --color-field-border-light: #9eb1c8;
    --color-field-border-dark: #516277;
    --color-field-shadow-light: rgba(127, 167, 216, 0.18);
    --color-field-shadow-dark: rgba(176, 201, 232, 0.2);
    --color-text-primary-light: #132030;
    --color-text-primary-dark: #e7edf5;
    --color-text-muted-light: #5f7085;
    --color-text-muted-dark: #9caabd;
    --color-text-secondary-light: #263449;
    --color-text-secondary-dark: #c9d3df;
    --color-list-item-bg-light: #f7f9fc;
    --color-list-item-bg-hover-light: #eef3f8;
    --color-list-item-bg-selected-light: #dfe9f6;
    --color-list-item-bg-dark: #17202a;
    --color-list-item-bg-hover-dark: #1b2633;
    --color-list-item-bg-selected-dark: #223245;
    --color-list-item-text-dark: #edf3fb;
    --color-list-item-text-muted-dark: #b1bece;
    --color-success: #4fb08f;
    --color-error: #d46b6b;
    --color-warning: #caa35c;
    --color-info: #7fa7d8;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 20px 44px rgba(15, 23, 42, 0.12);
    --sidebar-bg: linear-gradient(180deg, #0d1218 0%, #101722 100%);
    --sidebar-surface: #161f2c;
    --sidebar-border: #232e3c;
    --sidebar-text: #dbe4f2;
    --sidebar-text-muted: #8393a8;
    --sidebar-text-hover: #f5f8fc;
    --sidebar-primary: #8eb4df;
    --sideactionbar-light-bg: #eef3f8;
    --sideactionbar-light-surface: #f8fbff;
    --sideactionbar-light-border: #ccd8e6;
    --sideactionbar-light-text: #203247;
    --sideactionbar-light-text-muted: #63768c;
    --sideactionbar-light-text-hover: #0f1f31;
    --sideactionbar-light-primary: #6b93c4;
    --sideactionbar-dark-bg: #0d1218;
    --sideactionbar-dark-surface: #161f2c;
    --sideactionbar-dark-border: #273243;
    --sideactionbar-dark-text: #dbe4f2;
    --sideactionbar-dark-text-muted: #8393a8;
    --sideactionbar-dark-text-hover: #ffffff;
    --sideactionbar-dark-primary: #9dc1ea;
    --actionbar-light-shell-bg: #ffffff;
    --actionbar-light-shell-border: #ccd8e6;
    --actionbar-light-tooltip-bg: #203247;
    --actionbar-light-tooltip-text: #f8fbff;
    --actionbar-light-neutral-color: #4d627b;
    --actionbar-light-neutral-bg: #e9f0f7;
    --actionbar-light-create-color: #2f7a61;
    --actionbar-light-create-bg: #dff3ea;
    --actionbar-light-edit-color: #3f6f9c;
    --actionbar-light-edit-bg: #e1eefb;
    --actionbar-light-save-color: #5f62a9;
    --actionbar-light-save-bg: #e7e9fb;
    --actionbar-light-delete-color: #b05d66;
    --actionbar-light-delete-bg: #f8e3e6;
    --actionbar-light-cancel-color: #4d627b;
    --actionbar-light-cancel-bg: #e9f0f7;
    --actionbar-light-export-color: #3b7691;
    --actionbar-light-export-bg: #e0f1f7;
    --actionbar-light-apply-color: #9b7a42;
    --actionbar-light-apply-bg: #f7eddc;
    --actionbar-light-reset-color: #7a63a9;
    --actionbar-light-reset-bg: #efe6fa;
    --actionbar-light-audit-color: #a46d4a;
    --actionbar-light-audit-bg: #f8e8de;
    --navbar-light-shell-bg: #f8fbff;
    --navbar-light-shell-border: #ccd8e6;
    --navbar-light-shell-shadow: #9cb0c4;
    --navbar-light-shell-bg-effective: rgba(248, 251, 255, 0.96);
    --navbar-light-shell-border-effective: rgba(204, 216, 230, 0.95);
    --navbar-light-shell-shadow-effective: #9cb0c4;
    --navbar-light-brand-bg: linear-gradient(135deg, #6f90b9 0%, #b8d0ea 100%);
    --navbar-light-brand-text: #183049;
    --navbar-light-brand-subtitle: #698098;
    --navbar-light-link: #49607c;
    --navbar-light-link-hover: #183049;
    --navbar-light-panel-bg: #f8fbff;
    --navbar-light-panel-border: #ccd8e6;
    --navbar-light-panel-bg-effective: rgba(248, 251, 255, 0.98);
    --navbar-light-panel-border-effective: rgba(204, 216, 230, 0.95);
}

.bg-primary {
    border-color: rgba(111, 144, 185, 0.55) !important;
    background: linear-gradient(135deg, #314863 0%, #6b93c4 100%) !important;
    color: #f8fbff !important;
    box-shadow: 0 12px 24px rgba(107, 147, 196, 0.22) !important;
}

.hover\:bg-primary-hover:hover {
    background: linear-gradient(135deg, #2c4159 0%, #5f82af 100%) !important;
}

html,
body {
    font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
.font-display,
.spod-home-title,
.config-page-header__title,
.ue-card-title,
.spod-public-navbar__brand-copy p:first-child {
    font-family: 'Manrope', sans-serif;
}

html.dark {
    --navbar-dark-shell-bg: #0d1218;
    --navbar-dark-shell-border: #273243;
    --navbar-dark-shell-shadow: #06090d;
    --navbar-dark-shell-bg-effective: rgba(13, 18, 24, 0.94);
    --navbar-dark-shell-border-effective: rgba(39, 50, 67, 0.94);
    --navbar-dark-shell-shadow-effective: #06090d;
    --navbar-dark-brand-bg: linear-gradient(135deg, #35506f 0%, #89add6 100%);
    --navbar-dark-brand-text: #f7fbff;
    --navbar-dark-brand-subtitle: #a9b8cb;
    --navbar-dark-link: #dbe4f2;
    --navbar-dark-link-hover: #ffffff;
    --navbar-dark-panel-bg: #111925;
    --navbar-dark-panel-border: #273243;
    --navbar-dark-panel-bg-effective: rgba(17, 25, 37, 0.98);
    --navbar-dark-panel-border-effective: rgba(39, 50, 67, 0.95);
}