:root,
[data-theme="light"] {
  --color-primary-10: #e8f4f4;
  --color-primary-20: #d1e8e8;
  --color-primary-30: #b9dcdb;
  --color-primary-35: #b6d1cb;
  --color-primary-40: #a2d0cf;
  --color-primary-50: #74b9b8;
  --color-primary-60: #0f766e;
  --color-primary-70: #0d665f;
  --color-primary-80: #0b5250;
  --color-primary-90: #07433f;
  --color-primary-100: #053230;
  --color-secondary-10: #f1f4f7;
  --color-secondary-20: #e2e8ef;
  --color-secondary-30: #d4dce7;
  --color-secondary-40: #c5d0df;
  --color-secondary-50: #9fafc3;
  --color-secondary-60: #64748b;
  --color-secondary-70: #556479;
  --color-secondary-80: #475368;
  --color-secondary-90: #384356;
  --color-secondary-100: #2a3244;
  --color-success-10: #e9f6ef;
  --color-success-20: #d3edde;
  --color-success-30: #bde4ce;
  --color-success-40: #a7dbbe;
  --color-success-50: #75c69e;
  --color-success-60: #2e8b57;
  --color-success-70: #28774b;
  --color-success-80: #22643f;
  --color-success-90: #1b5033;
  --color-success-100: #153d27;
  --color-warning-10: #fff7e6;
  --color-warning-20: #feefcc;
  --color-warning-30: #fde7b3;
  --color-warning-40: #fcdf99;
  --color-warning-50: #f7c86c;
  --color-warning-60: #d68a1f;
  --color-warning-70: #bd7a1b;
  --color-warning-80: #a36a17;
  --color-warning-90: #895913;
  --color-warning-100: #70490f;
  --color-danger-10: #fdecec;
  --color-danger-20: #fad9d9;
  --color-danger-30: #f8c5c5;
  --color-danger-40: #f5b2b2;
  --color-danger-50: #ec8484;
  --color-danger-60: #c0392b;
  --color-danger-70: #a93226;
  --color-danger-80: #932b21;
  --color-danger-90: #7c241b;
  --color-danger-100: #661d16;
  --color-info-10: #e9f2ff;
  --color-info-20: #d2e6ff;
  --color-info-30: #bcdbff;
  --color-info-40: #a5cfff;
  --color-info-50: #77b6ff;
  --color-info-60: #2f80ed;
  --color-info-70: #296fce;
  --color-info-80: #235faf;
  --color-info-90: #1d4f90;
  --color-info-100: #173f72;
  --color-neutral-10: #f5f7f8;
  --color-neutral-20: #eef2f3;
  --color-neutral-30: #e1e7ea;
  --color-neutral-40: #c7d0d5;
  --color-neutral-50: #a6b1b8;
  --color-neutral-60: #7f8b94;
  --color-neutral-70: #66727a;
  --color-neutral-80: #4e5961;
  --color-neutral-90: #374046;
  --color-neutral-100: #252c31;
  --color-white: #ffffff;
  --color-black: #000000;
  --theme-primary: var(--color-primary-60);
  --theme-success: var(--color-success-60);
  --theme-danger: var(--color-danger-60);
  --theme-warning: var(--color-warning-60);
  --erp-bg: var(--color-white);
  --erp-text: var(--color-neutral-90);
  --bs-primary: var(--color-primary-60);
  --bs-success: var(--color-success-60);
  --bs-warning: var(--color-warning-60);
  --bs-danger: var(--color-danger-60);
  --bs-info: var(--color-info-60);
  --bs-secondary: var(--color-secondary-60);
  --bs-body-bg: var(--color-neutral-10);
  --bs-body-color: var(--color-neutral-90);
  --bs-border-color: var(--color-neutral-30);
  --bs-focus-ring-color: color-mix(
    in srgb,
    var(--color-primary-60) 25%,
    transparent
  );
  --color-bg-canvas: var(--color-white);
  --color-bg-surface: var(--color-neutral-20);
  --color-bg-elevated: var(--color-neutral-10);
  --theme-dark: var(--color-primary-90);
  --theme-sidebar-bg: var(--color-bg-surface);
  --theme-active: var(--color-primary-35);
  --theme-hover: var(--color-neutral-30);
  --sidebar-width: 240px;
  --icon-bar-width: 60px;
  --erp-navbar-height: 56px;
  --erp-status-success-bg: var(--color-success-40);
  --erp-status-success-fg: var(--color-success-90);
  --erp-status-warning-bg: var(--color-warning-40);
  --erp-status-warning-fg: var(--color-warning-90);
  --erp-status-danger-bg: var(--color-danger-40);
  --erp-status-danger-fg: var(--color-danger-90);
  --erp-status-success: var(--color-success-40);
  --erp-status-warning: var(--color-warning-40);
  --erp-status-danger: var(--color-danger-40);
  --erp-status-info-bg: var(--color-info-40);
  --erp-status-info-fg: var(--color-info-90);
  --erp-status-neutral-bg: var(--color-neutral-30);
  --erp-status-neutral-fg: var(--color-neutral-90);
  --erp-modal-bg: var(--color-neutral-10);
  --erp-modal-border: var(--color-neutral-30);
  --erp-modal-header-bg: var(--color-neutral-20);
  --erp-navbar-fg: var(--color-neutral-10);
  --erp-logo-bg: var(--color-neutral-10);
  --erp-logo-fg: var(--color-primary-90);
  --erp-profile-bg: var(--color-primary-50);
  --erp-overlay-bg: color-mix(
    in srgb,
    var(--color-neutral-10) 70%,
    transparent
  );
}

[data-theme="dark"] {
  --color-primary-35: #b6d1cb;
  --color-secondary-10: #161d25;
  --color-secondary-20: #1e2731;
  --color-secondary-30: #27323e;
  --color-secondary-40: #334051;
  --color-secondary-50: #445467;
  --color-secondary-60: #7b8ea3;
  --color-secondary-70: #9caec1;
  --color-secondary-80: #bac7d4;
  --color-secondary-90: #d5dde7;
  --color-secondary-100: #e9eef4;
  --color-neutral-10: #14191d;
  --color-neutral-20: #1a2126;
  --color-neutral-30: #20292f;
  --color-neutral-40: #2b363d;
  --color-neutral-50: #46535d;
  --color-neutral-60: #677784;
  --color-neutral-70: #90a0ab;
  --color-neutral-80: #b6c1c8;
  --color-neutral-90: #d6dde1;
  --color-neutral-100: #f1f5f8;
  --theme-primary: var(--color-primary-60);
  --theme-success: var(--color-success-60);
  --theme-danger: var(--color-danger-60);
  --theme-warning: var(--color-warning-60);
  --erp-bg: var(--color-bg-canvas);
  --erp-text: var(--color-neutral-90);
  --bs-body-bg: var(--color-neutral-10);
  --bs-body-color: var(--color-neutral-90);
  --bs-border-color: var(--color-neutral-40);
  --color-bg-canvas: var(--color-neutral-10);
  --color-bg-surface: var(--color-neutral-20);
  --color-bg-elevated: var(--color-neutral-30);
  --theme-dark: var(--color-primary-90);
  --theme-sidebar-bg: var(--color-bg-surface);
  --theme-active: color-mix(
    in srgb,
    var(--color-primary-60) 35%,
    var(--color-neutral-30)
  );
  --theme-hover: var(--color-neutral-30);
  --erp-navbar-height: 56px;
  --erp-modal-bg: var(--color-neutral-20);
  --erp-modal-border: var(--color-neutral-40);
  --erp-modal-header-bg: var(--color-neutral-30);
  --erp-navbar-fg: var(--color-neutral-100);
  --erp-logo-bg: var(--color-neutral-100);
  --erp-logo-fg: var(--color-primary-90);
  --erp-profile-bg: color-mix(
    in srgb,
    var(--color-primary-60) 55%,
    var(--color-neutral-30)
  );
  --erp-overlay-bg: color-mix(
    in srgb,
    var(--color-neutral-30) 70%,
    transparent
  );
}

:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --spacing-4: var(--space-4);
  --size-6: 2rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --shadow-sm: var(--bs-box-shadow-sm);
  --shadow-m: var(--bs-box-shadow-sm);
  --shadow: var(--bs-box-shadow);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

:root {
  --font-size-h1: 2rem;
  --font-size-h2: 1.75rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-h5: 1.125rem;
  --font-size-h6: 1rem;
  --font-size-subtitle: 1rem;
  --font-size-body: 0.875rem;
  --font-size-small: 0.75rem;
  --font-size-table-dense: 0.8125rem;
  --line-height-heading: 1.2;
  --line-height-body: 1.5;
}

.dropdown-menu {
  position: relative;
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--color-bg-canvas);
  top: -0.35rem;
  left: 0.75rem;
  transform: rotate(45deg);
  border-radius: 0 0 0.125rem 0;
  pointer-events: none;
}

.dropdown-menu-end::before {
  left: auto;
  right: 0.75rem;
}