/* NEXAR Design Tokens v2.3.0 — canonical values. DO NOT hardcode replacements. */
/* Loaded after legacy styles.css. design-system.css applies component-level rules. */
:root {
  font-family: var(--nx-font-family);
  font-synthesis: none;
  color-scheme: light;
  --nx-font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nx-text-2xs: 10px;
  --nx-text-xs: 11px;
  --nx-text-sm: 12px;
  --nx-text-md: 13px;
  --nx-text-base: 14px;
  --nx-text-lg: 16px;
  --nx-text-xl: 18px;
  --nx-text-2xl: 21px;
  --nx-text-3xl: 26px;
  --nx-weight-regular: 400;
  --nx-weight-medium: 500;
  --nx-weight-semibold: 600;
  --nx-weight-bold: 700;
  --nx-weight-heavy: 800;
  --nx-icon-xs: 14px;
  --nx-icon-sm: 16px;
  --nx-icon-md: 18px;
  --nx-icon-lg: 20px;
  --nx-icon-xl: 24px;
  --nx-icon-app: 46px;
  --nx-icon-stroke: 1.8;
  --nx-icon-surface-opacity: 0.11;
  --nx-leading-tight: 1.35;
  --nx-leading-normal: 1.6;
  --nx-leading-relaxed: 1.8;
  --nx-space-1: 4px;
  --nx-space-2: 8px;
  --nx-space-3: 12px;
  --nx-space-4: 16px;
  --nx-space-5: 20px;
  --nx-space-6: 24px;
  --nx-space-8: 32px;
  --nx-space-10: 40px;
  --nx-space-12: 48px;
  --nx-radius-xs: 6px;
  --nx-radius-sm: 8px;
  --nx-radius-md: 10px;
  --nx-radius-lg: 12px;
  --nx-radius-xl: 16px;
  --nx-radius-2xl: 18px;
  --nx-radius-full: 999px;
  --nx-shadow-xs: 0 1px 2px rgba(16,29,53,.035);
  --nx-shadow-sm: 0 3px 12px rgba(16,29,53,.045);
  --nx-shadow-md: 0 8px 23px rgba(16,29,53,.065);
  --nx-shadow-lg: 0 20px 50px rgba(6,19,45,.17);
  --nx-motion-fast: 110ms;
  --nx-motion-base: 160ms;
  --nx-motion-slow: 220ms;
  --nx-ease: cubic-bezier(.22,.72,.22,1);
  --nx-hover-rise: -2px;
  --nx-content-width: 1320px;
  --nx-header-height: 64px;
  --nx-sidebar-width: 232px;
  --nx-sidebar-collapsed: 76px;
  --nx-grid-gap: 12px;
  --nx-appcard-minheight: 162px;
  --nx-appcard-pad: 18px;
  --nx-appcard-icon: 42px;
  --nx-appcard-title: 16px;
  --nx-kpi-height: 115px;
  --nx-kpi-pad: 16px;
  --nx-kpi-value: 24px;
  --nx-button-sm: 34px;
  --nx-button-md: 40px;
  --nx-button-lg: 46px;
  --nx-input-height: 42px;
  --nx-table-row: 46px;
  --nx-table-head: 42px;
  --nx-dialog-md: 620px;
  --nx-dialog-lg: 820px;
  --nx-focus-ring: 0 0 0 3px rgba(80,97,217,.16);
  --nx-hr-accent: #008FCB;
  --nx-hr-soft: #E4F5FD;
  --nx-hr-ink: #006C9A;
  --nx-projects-accent: #7440EC;
  --nx-projects-soft: #F1EAFF;
  --nx-projects-ink: #5328AE;
  --nx-finance-accent: #2254E5;
  --nx-finance-soft: #E9EFFF;
  --nx-finance-ink: #2142AF;
  --nx-procurement-accent: #EC426B;
  --nx-procurement-soft: #FDE9EF;
  --nx-procurement-ink: #AF2A4B;
  --nx-fleet-accent: #E97527;
  --nx-fleet-soft: #FFF0E4;
  --nx-fleet-ink: #A44C16;
  --nx-settings-accent: #B03CB7;
  --nx-settings-soft: #F9EAF9;
  --nx-settings-ink: #802C86;
  --nx-platform-accent: #34425F;
  --nx-platform-soft: #EDF0F6;
  --nx-platform-ink: #28354F;
  --nx-success: #25946a;
  --nx-success-soft: #eaf7f1;
  --nx-warning: #ca8522;
  --nx-warning-soft: #fff5e5;
  --nx-danger: #d84d62;
  --nx-danger-soft: #fdeef1;
  --nx-info: #3876d6;
  --nx-info-soft: #eaf2ff;
  --nx-bg: #F5F6F9;
  --nx-surface: #ffffff;
  --nx-surface-soft: #FAFAFC;
  --nx-surface-muted: #eff3f9;
  --nx-text: #1C273B;
  --nx-text-soft: #53637c;
  --nx-text-muted: #78869b;
  --nx-border: #E4E8EF;
  --nx-border-strong: #d1dbe9;
  --nx-brand: #344C91;
  --nx-brand-hover: #263B78;
  --nx-brand-soft: #E9EEFC;
  --nx-navy: #182849;
  --nx-shadow-card: 0 3px 12px rgba(17,34,65,.043);
  --nx-inverse: #ffffff;
  --bg: var(--nx-bg);
  --surface: var(--nx-surface);
  --surface2: var(--nx-surface-soft);
  --ink: var(--nx-text);
  --muted: var(--nx-text-muted);
  --line: var(--nx-border);
  --blue: var(--nx-brand);
  --accent: var(--nx-brand);
  --navy: var(--nx-navy);
  --shadow: var(--nx-shadow-card);
  --radius: var(--nx-radius-xl);
  --speed: var(--nx-motion-base) var(--nx-ease);
}
[data-theme="dark"] {
  color-scheme: dark;
  --nx-bg: #101522;
  --nx-surface: #192232;
  --nx-surface-soft: #222C3F;
  --nx-surface-muted: #25334d;
  --nx-text: #edf3fd;
  --nx-text-soft: #b6c3d7;
  --nx-text-muted: #99a8be;
  --nx-border: #304059;
  --nx-border-strong: #465771;
  --nx-brand: #A4B1EE;
  --nx-brand-hover: #C1C9F8;
  --nx-brand-soft: #2a365c;
  --nx-navy: #111a2a;
  --nx-shadow-card: 0 3px 13px rgba(0,0,0,.15);
  --nx-inverse: #101829;
}

:root[data-palette="calm"] {
  --nx-hr-accent: #52799A;
  --nx-projects-accent: #7D6B90;
  --nx-finance-accent: #4D6182;
  --nx-procurement-accent: #A66880;
  --nx-fleet-accent: #638498;
  --nx-settings-accent: #808298;
  --nx-platform-accent: #566182;
  --nx-brand: #52617F;
}

:root[data-palette="modern"] {
  --nx-hr-accent: #149BCA;
  --nx-projects-accent: #7956E2;
  --nx-finance-accent: #3168E1;
  --nx-procurement-accent: #E95486;
  --nx-fleet-accent: #2C83B4;
  --nx-settings-accent: #9368C3;
  --nx-platform-accent: #5364C8;
  --nx-brand: #385FCD;
}

:root[data-theme="dark"][data-palette="signature"] {
  --nx-brand: #B0BCFF;
  --nx-hr-accent: color-mix(in srgb, #008FCB 72%, white);
  --nx-hr-ink: color-mix(in srgb, #008FCB 65%, white);
  --nx-projects-accent: color-mix(in srgb, #7440EC 72%, white);
  --nx-projects-ink: color-mix(in srgb, #7440EC 65%, white);
  --nx-finance-accent: color-mix(in srgb, #2254E5 72%, white);
  --nx-finance-ink: color-mix(in srgb, #2254E5 65%, white);
  --nx-procurement-accent: color-mix(in srgb, #EC426B 72%, white);
  --nx-procurement-ink: color-mix(in srgb, #EC426B 65%, white);
  --nx-fleet-accent: color-mix(in srgb, #E97527 72%, white);
  --nx-fleet-ink: color-mix(in srgb, #E97527 65%, white);
  --nx-settings-accent: color-mix(in srgb, #B03CB7 72%, white);
  --nx-settings-ink: color-mix(in srgb, #B03CB7 65%, white);
  --nx-platform-accent: color-mix(in srgb, #34425F 72%, white);
  --nx-platform-ink: color-mix(in srgb, #34425F 65%, white);
}

:root[data-theme="dark"][data-palette="calm"] {
  --nx-brand: #B8C2E8;
  --nx-hr-accent: color-mix(in srgb, #52799A 72%, white);
  --nx-projects-accent: color-mix(in srgb, #7D6B90 72%, white);
  --nx-finance-accent: color-mix(in srgb, #4D6182 72%, white);
  --nx-procurement-accent: color-mix(in srgb, #A66880 72%, white);
  --nx-fleet-accent: color-mix(in srgb, #638498 72%, white);
  --nx-settings-accent: color-mix(in srgb, #808298 72%, white);
  --nx-platform-accent: color-mix(in srgb, #566182 72%, white);
}

:root[data-theme="dark"][data-palette="modern"] {
  --nx-brand: #B8C2E8;
  --nx-hr-accent: color-mix(in srgb, #149BCA 72%, white);
  --nx-projects-accent: color-mix(in srgb, #7956E2 72%, white);
  --nx-finance-accent: color-mix(in srgb, #3168E1 72%, white);
  --nx-procurement-accent: color-mix(in srgb, #E95486 72%, white);
  --nx-fleet-accent: color-mix(in srgb, #2C83B4 72%, white);
  --nx-settings-accent: color-mix(in srgb, #9368C3 72%, white);
  --nx-platform-accent: color-mix(in srgb, #5364C8 72%, white);
}