/* Generated by generate.py from ef-design-system brand spatiafi 1.1.0. Do not edit; re-run the script. */

@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 500;
  src: url("montserrat-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
  --bs-font-sans-serif: var(--font-sans);
  --bs-body-font-family: var(--font-sans);
  --bs-font-monospace: var(--font-mono);
  --bs-body-bg: var(--color-canvas);
  --bs-body-color: var(--color-text-primary);
  --bs-heading-color: var(--color-text-heading);
  --bs-emphasis-color: var(--color-text-heading);
  --bs-secondary-bg: var(--color-surface-elev);
  --bs-tertiary-bg: var(--color-canvas-sunken);
  --bs-light: var(--color-canvas-sunken);
  --bs-light-active: var(--color-border-strong);
  --bs-code-color: var(--color-text-accent);
  --bs-app-bg-color: var(--color-canvas);
  --bs-app-blank-bg-color: var(--color-canvas);
  --bs-app-header-base-bg-color: var(--color-canvas);
  --bs-app-header-minimize-bg-color: color-mix(in srgb, var(--color-canvas) 50%, transparent);
  --bs-app-sidebar-base-bg-color: var(--color-sidebar);
  --bs-text-primary: var(--color-text-accent);
  --bs-text-success: var(--color-text-accent);
  --bs-text-danger: var(--color-text-danger);
  --bs-text-warning: color-mix(in srgb, var(--color-warning) 70%, var(--color-text-heading));
  --bs-text-info: color-mix(in srgb, var(--color-info) 70%, var(--color-text-heading));
  --bs-text-muted: var(--color-text-tertiary);
  --bs-text-dark: var(--color-text-heading);
  --bs-text-secondary: var(--color-text-secondary);
  --bs-app-sidebar-base-box-shadow: none;
  --bs-app-sidebar-base-border-end: none;
  --bs-border-color: var(--color-border-strong);
  --bs-border-dashed-color: var(--color-border-strong);
  --bs-link-color: var(--color-text-accent);
  --bs-link-hover-color: var(--color-action-hover);
  --bs-component-active-bg: var(--color-action);
  --bs-component-active-color: var(--color-on-action);
  --bs-component-checked-bg: var(--color-action);
  --bs-component-checked-color: var(--color-on-action);
  --bs-component-hover-color: var(--color-text-accent);
  --bs-input-bg: var(--color-surface);
  --bs-input-color: var(--color-text-primary);
  --bs-input-solid-bg: var(--color-canvas-sunken);
  --bs-input-solid-bg-focus: var(--color-canvas-deep);
  --bs-input-solid-color: var(--color-text-primary);
  --bs-input-solid-placeholder-color: var(--color-text-tertiary);
  --bs-menu-dropdown-bg-color: var(--color-surface-elev);
  --bs-menu-dropdown-box-shadow: var(--shadow-lg);
  --bs-menu-heading-color: var(--color-text-tertiary);
  --bs-border-radius-sm: calc(var(--radius-row) * 0.75);
  --bs-border-radius: var(--radius-row);
  --bs-border-radius-lg: var(--radius-control);
  --bs-border-radius-xl: var(--radius-surface);
  --bs-border-radius-xxl: calc(var(--radius-surface) * 1.5);
  --bs-primary: var(--color-action);
  --bs-primary-active: var(--color-action-hover);
  --bs-primary-inverse: var(--color-on-action);
  --bs-primary-light: color-mix(in srgb, var(--color-action) 14%, var(--color-surface));
  --bs-primary-bg-subtle: color-mix(in srgb, var(--color-action) 14%, var(--color-surface));
  --bs-primary-border-subtle: color-mix(in srgb, var(--color-action) 40%, var(--color-surface));
  --bs-primary-clarity: color-mix(in srgb, var(--color-action) 20%, transparent);
  --bs-primary-text-emphasis: color-mix(in srgb, var(--color-action) 70%, var(--color-text-heading));
  --bs-success: var(--color-success);
  --bs-success-active: var(--color-accent-700);
  --bs-success-inverse: var(--color-on-accent);
  --bs-success-light: color-mix(in srgb, var(--color-success) 14%, var(--color-surface));
  --bs-success-bg-subtle: color-mix(in srgb, var(--color-success) 14%, var(--color-surface));
  --bs-success-border-subtle: color-mix(in srgb, var(--color-success) 40%, var(--color-surface));
  --bs-success-clarity: color-mix(in srgb, var(--color-success) 20%, transparent);
  --bs-success-text-emphasis: color-mix(in srgb, var(--color-success) 70%, var(--color-text-heading));
  --bs-danger: var(--color-danger);
  --bs-danger-active: var(--color-danger-fg);
  --bs-danger-inverse: var(--color-on-danger);
  --bs-danger-light: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
  --bs-danger-bg-subtle: color-mix(in srgb, var(--color-danger) 14%, var(--color-surface));
  --bs-danger-border-subtle: color-mix(in srgb, var(--color-danger) 40%, var(--color-surface));
  --bs-danger-clarity: color-mix(in srgb, var(--color-danger) 20%, transparent);
  --bs-danger-text-emphasis: color-mix(in srgb, var(--color-danger) 70%, var(--color-text-heading));
  --bs-warning: var(--color-warning);
  --bs-warning-active: var(--color-warning-fg);
  --bs-warning-inverse: var(--color-white);
  --bs-warning-light: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface));
  --bs-warning-bg-subtle: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface));
  --bs-warning-border-subtle: color-mix(in srgb, var(--color-warning) 40%, var(--color-surface));
  --bs-warning-clarity: color-mix(in srgb, var(--color-warning) 20%, transparent);
  --bs-warning-text-emphasis: color-mix(in srgb, var(--color-warning) 70%, var(--color-text-heading));
  --bs-info: var(--color-info);
  --bs-info-active: var(--color-info-fg);
  --bs-info-inverse: var(--color-white);
  --bs-info-light: color-mix(in srgb, var(--color-info) 14%, var(--color-surface));
  --bs-info-bg-subtle: color-mix(in srgb, var(--color-info) 14%, var(--color-surface));
  --bs-info-border-subtle: color-mix(in srgb, var(--color-info) 40%, var(--color-surface));
  --bs-info-clarity: color-mix(in srgb, var(--color-info) 20%, transparent);
  --bs-info-text-emphasis: color-mix(in srgb, var(--color-info) 70%, var(--color-text-heading));
  --bs-menu-link-color-active: var(--color-text-accent);
  --bs-menu-link-bg-color-active: color-mix(in srgb, var(--color-action) 12%, var(--color-surface));
  --bs-menu-link-color-here: var(--color-text-accent);
  --bs-menu-link-bg-color-here: color-mix(in srgb, var(--color-action) 12%, var(--color-surface));
  --bs-menu-link-color-hover: var(--color-text-accent);
  --bs-menu-link-bg-color-hover: color-mix(in srgb, var(--color-action) 12%, var(--color-surface));
  --bs-menu-link-color-show: var(--color-text-accent);
  --bs-menu-link-bg-color-show: color-mix(in srgb, var(--color-action) 12%, var(--color-surface));
}

:root,
[data-bs-theme=light] {
  --color-brand-50: #eef5f3;
  --color-brand-100: #dceae6;
  --color-brand-200: #b8d9d1;
  --color-brand-300: #6fb7a8;
  --color-brand-400: #2a8a78;
  --color-brand-500: #1b6e60;
  --color-brand-600: #155249;
  --color-brand-700: #14302a;
  --color-brand-800: #082825;
  --color-brand-900: #061f1c;
  --color-accent-50: #effaf3;
  --color-accent-100: #e0f6e7;
  --color-accent-200: #c4eed1;
  --color-accent-300: #93e2af;
  --color-accent-400: #5cd189;
  --color-accent-500: #2dbe6c;
  --color-accent-600: #1fa859;
  --color-accent-700: #157a48;
  --color-accent-800: #0e6238;
  --color-accent-900: #074a29;
  --color-on-accent: #ffffff;
  --color-action: var(--color-accent-700);
  --color-action-hover: var(--color-accent-800);
  --color-action-active: var(--color-accent-900);
  --color-on-action: #ffffff;
  --color-brand-orange: #fcb421;
  --color-brand-mark-bg: #0a201b;
  --color-canvas: #f4f5f3;
  --color-canvas-sunken: #ecedea;
  --color-overlay-scrim: rgba(6, 9, 13, 0.55);
  --color-canvas-deep: #ecedea;
  --color-surface: #ffffff;
  --color-surface-elev: #ffffff;
  --color-white: #ffffff;
  --color-slate-50: #f6f6f3;
  --color-slate-100: #edeff2;
  --color-slate-200: #dde1e6;
  --color-slate-300: #c2c8d0;
  --color-slate-400: #8e96a2;
  --color-slate-500: #5b6471;
  --color-slate-600: #3f4855;
  --color-slate-700: #2a323d;
  --color-slate-800: #1a2028;
  --color-slate-900: #0e1218;
  --color-slate-950: #06090d;
  --color-success: #1fa859;
  --color-success-bg: #e0f6e7;
  --color-warning: #e89348;
  --color-warning-bg: #fdecdc;
  --color-danger: #c4433a;
  --color-danger-bg: #fbe3e0;
  --color-info: #2f6fb5;
  --color-info-bg: #e1ecf8;
  --color-info-fg: #205896;
  --color-warning-fg: #a35a14;
  --color-danger-fg: #973328;
  --color-success-fg: var(--color-accent-700);
  --color-success-border: #b9e6c8;
  --color-warning-border: #f6cba0;
  --color-danger-border: #f1bcb4;
  --color-info-border: #b9d2ea;
  --color-risk-1: #2dbe6c;
  --color-risk-2: #9bcc3f;
  --color-risk-3: #f1c24b;
  --color-risk-4: #e89348;
  --color-risk-5: #d14a3d;
  --color-app-energy: #2dbe6c;
  --color-app-risk: #e89348;
  --color-app-analytics: #d14a8a;
  --color-app-water: #3b9fde;
  --color-app-carbon: #7c6cf3;
  --color-app-admin: #2a8a78;
  --color-app-nexus: #f1c24b;
  --color-fin-earth: #2dbe6c;
  --color-fin-external: #7b66d6;
  --color-fin-alt: #d9a93a;
  --color-fin-none: #9aa3ad;
  --color-status-draft: #9aa3ad;
  --color-status-saved: #d9a93a;
  --color-status-review: #3a83d9;
  --color-status-approved: #1fa859;
  --color-data-blue: #4ea7d6;
  --color-stage-signal: #8a93a0;
  --color-stage-screened: #e0a13c;
  --color-map-bg: #0b0f15;
  --color-map-extrusion: #3a4150;
  --map-scrim: 13 17 23;
  --map-hairline: 255 255 255;
  --map-text: 226 232 240;
  --color-text-primary: var(--color-slate-700);
  --color-text-secondary: var(--color-slate-500);
  --color-text-tertiary: var(--color-slate-500);
  --color-text-disabled: var(--color-slate-300);
  --color-text-heading: var(--color-slate-900);
  --color-text-inverse: var(--color-white);
  --color-text-accent: var(--color-accent-700);
  --color-text-danger: var(--color-danger);
  --color-border: var(--color-slate-100);
  --color-border-strong: var(--color-slate-200);
  --color-border-focus: var(--color-accent-700);
  --color-focus-ring: var(--color-border-focus);
  --color-sidebar: var(--color-brand-700);
  --color-sidebar-text: #ffffff;
  --color-sidebar-text-muted: #8a9c95;
  --color-rail: var(--color-brand-900);
  --color-sidebar-deep: var(--color-rail);
  --shadow-ring-focus: 0 0 0 2px var(--color-focus-ring);
  --color-on-brand: #ffffff;
  --color-on-dark: #ffffff;
  --color-on-media: #ffffff;
  --color-on-danger: #ffffff;
  --color-shade: #000000;
  --color-highlight: #ffffff;
  --color-chart-series-1: #1b6e60;
  --color-chart-series-2: #3b9fde;
  --color-chart-series-3: #7c6cf3;
  --color-chart-series-4: #e89348;
  --color-chart-series-5: #d14a8a;
  --color-chart-series-6: #2dbe6c;
  --color-chart-value-on-series: #f6f6f3;
  --color-chart-value: #5b6471;
  --color-pillar-supply-1: #00eaff;
  --color-pillar-supply-2: #00cdff;
  --color-pillar-supply-3: #00b0ff;
  --color-pillar-supply-4: #0095ff;
  --color-pillar-supply-5: #0077ff;
  --color-pillar-price-1: #6bf190;
  --color-pillar-price-2: #00d34b;
  --color-pillar-price-3: #00b000;
  --color-pillar-price-4: #008d00;
  --color-pillar-price-5: #006a00;
  --color-pillar-carbon-1: #ffadff;
  --color-pillar-carbon-2: #ff68ff;
  --color-pillar-carbon-3: #ff00ff;
  --color-pillar-carbon-4: #f300ef;
  --color-pillar-carbon-5: #cd00cc;
  --color-pillar-supply: #3b82f6;
  --color-pillar-price: #16a34a;
  --color-pillar-carbon: #db2777;
  --color-control-thumb: #ffffff;
  --color-map-tooltip-surface: #ffffff;
  --color-overlay-scrim-light: rgba(0, 0, 0, 0.2);
  --color-ai-mark: #fcb421;
  --color-ai-mark-bg: #17301f;
  --font-sans: "Montserrat Variable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 500;
  --font-weight-bold: 500;
  --font-weight-extrabold: 500;
  --font-weight-black: 500;
  --text-display: 3.5rem;
  --text-display--line-height: 1.05;
  --text-display--font-weight: 500;
  --text-display--letter-spacing: -0.025em;
  --text-h1: 2.25rem;
  --text-h1--line-height: 1.15;
  --text-h1--font-weight: 500;
  --text-h1--letter-spacing: -0.02em;
  --text-h2: 1.75rem;
  --text-h2--line-height: 1.2;
  --text-h2--font-weight: 500;
  --text-h2--letter-spacing: -0.015em;
  --text-h3: 1.375rem;
  --text-h3--line-height: 1.25;
  --text-h3--font-weight: 500;
  --text-h4: 1.125rem;
  --text-h4--line-height: 1.3;
  --text-h4--font-weight: 500;
  --text-body-lg: 1.0625rem;
  --text-body-lg--line-height: 1.55;
  --text-body-lg--font-weight: 400;
  --text-body: 0.9375rem;
  --text-body--line-height: 1.55;
  --text-body--font-weight: 400;
  --text-body-sm: 0.8125rem;
  --text-body-sm--line-height: 1.5;
  --text-body-sm--font-weight: 400;
  --text-caption: 0.75rem;
  --text-caption--line-height: 1.5;
  --text-caption--font-weight: 400;
  --text-overline: 0.6875rem;
  --text-overline--line-height: 1.5;
  --text-overline--font-weight: 500;
  --text-overline--letter-spacing: 0.12em;
  --text-mono: 0.8125rem;
  --text-mono--line-height: 1.5;
  --text-mono--font-weight: 400;
  --radius-row: 0.5rem;
  --radius-control: 0.625rem;
  --radius-surface: 1rem;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px 0 rgba(14, 18, 24, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(14, 18, 24, 0.06), 0 1px 2px 0 rgba(14, 18, 24, 0.04);
  --shadow-md: 0 4px 10px -2px rgba(14, 18, 24, 0.08), 0 2px 4px -2px rgba(14, 18, 24, 0.05);
  --shadow-lg: 0 8px 24px rgba(16, 40, 32, 0.14);
  --shadow-xl: 0 28px 50px -16px rgba(14, 18, 24, 0.22);
  --bs-gray-100: var(--color-slate-100);
  --bs-gray-100-rgb: 237,239,242;
  --bs-text-gray-100: var(--color-slate-100);
  --bs-gray-200: var(--color-slate-200);
  --bs-gray-200-rgb: 221,225,230;
  --bs-text-gray-200: var(--color-slate-200);
  --bs-gray-300: var(--color-slate-300);
  --bs-gray-300-rgb: 194,200,208;
  --bs-text-gray-300: var(--color-slate-300);
  --bs-gray-400: var(--color-slate-400);
  --bs-gray-400-rgb: 142,150,162;
  --bs-text-gray-400: var(--color-slate-400);
  --bs-gray-500: var(--color-slate-500);
  --bs-gray-500-rgb: 91,100,113;
  --bs-text-gray-500: var(--color-slate-500);
  --bs-gray-600: var(--color-slate-600);
  --bs-gray-600-rgb: 63,72,85;
  --bs-text-gray-600: var(--color-slate-600);
  --bs-gray-700: var(--color-slate-700);
  --bs-gray-700-rgb: 42,50,61;
  --bs-text-gray-700: var(--color-slate-700);
  --bs-gray-800: var(--color-slate-800);
  --bs-gray-800-rgb: 26,32,40;
  --bs-text-gray-800: var(--color-slate-800);
  --bs-gray-900: var(--color-slate-900);
  --bs-gray-900-rgb: 14,18,24;
  --bs-text-gray-900: var(--color-slate-900);
  --bs-primary-rgb: 21,122,72;
  --bs-success-rgb: 31,168,89;
  --bs-danger-rgb: 196,67,58;
  --bs-warning-rgb: 232,147,72;
  --bs-info-rgb: 47,111,181;
  --bs-body-bg-rgb: 244,245,243;
  --bs-light-rgb: 236,237,234;
  --bs-body-color-rgb: 42,50,61;
  --bs-link-color-rgb: 21,122,72;
  --bs-link-hover-color-rgb: 14,98,56;
}

[data-bs-theme=dark] {
  --color-canvas-deep: #08130f;
  --color-canvas: #0c1c18;
  --color-canvas-sunken: #08130f;
  --color-surface: #0e2520;
  --color-surface-elev: #122c25;
  --color-text-primary: #e7efea;
  --color-text-secondary: #b6c5be;
  --color-text-tertiary: #8a9c95;
  --color-text-disabled: #5d706a;
  --color-text-heading: #e7efea;
  --color-text-accent: #6fe1a9;
  --color-text-danger: #f2a89e;
  --color-border: #1b3b32;
  --color-border-strong: #25564a;
  --color-border-focus: #3bd39d;
  --color-focus-ring: #3bd39d;
  --color-chart-value: #b6c5be;
  --color-sidebar-text: #e7efea;
  --color-sidebar-text-muted: #8a9c95;
  --bs-gray-100: var(--color-surface-elev);
  --bs-gray-100-rgb: 18,44,37;
  --bs-text-gray-100: var(--color-surface-elev);
  --bs-gray-200: var(--color-border);
  --bs-gray-200-rgb: 27,59,50;
  --bs-text-gray-200: var(--color-border);
  --bs-gray-300: var(--color-border-strong);
  --bs-gray-300-rgb: 37,86,74;
  --bs-text-gray-300: var(--color-border-strong);
  --bs-gray-400: var(--color-text-disabled);
  --bs-gray-400-rgb: 93,112,106;
  --bs-text-gray-400: var(--color-text-disabled);
  --bs-gray-500: var(--color-text-tertiary);
  --bs-gray-500-rgb: 138,156,149;
  --bs-text-gray-500: var(--color-text-tertiary);
  --bs-gray-600: var(--color-text-tertiary);
  --bs-gray-600-rgb: 138,156,149;
  --bs-text-gray-600: var(--color-text-tertiary);
  --bs-gray-700: var(--color-text-secondary);
  --bs-gray-700-rgb: 182,197,190;
  --bs-text-gray-700: var(--color-text-secondary);
  --bs-gray-800: var(--color-text-primary);
  --bs-gray-800-rgb: 231,239,234;
  --bs-text-gray-800: var(--color-text-primary);
  --bs-gray-900: var(--color-text-heading);
  --bs-gray-900-rgb: 231,239,234;
  --bs-text-gray-900: var(--color-text-heading);
  --bs-primary-rgb: 21,122,72;
  --bs-success-rgb: 31,168,89;
  --bs-danger-rgb: 196,67,58;
  --bs-warning-rgb: 232,147,72;
  --bs-info-rgb: 47,111,181;
  --bs-body-bg-rgb: 12,28,24;
  --bs-light-rgb: 8,19,15;
  --bs-body-color-rgb: 231,239,234;
  --bs-link-color-rgb: 111,225,169;
  --bs-link-hover-color-rgb: 14,98,56;
}

/* Brand rule: 500 is the heaviest weight. The @font-face above only covers
   300-500, and font-synthesis: none stops the browser faking bold, so any 600
   or 700 left in SFTPGo's stylesheet renders as 500. The classes below make it
   explicit for the common cases. */
/* SFTPGo's bundle hard-codes Inter on html, body instead of using the variable. */
html, body { font-family: var(--font-sans); font-synthesis: none; -webkit-font-smoothing: antialiased; }
b, strong, th, h1, h2, h3, h4, h5, h6, .btn,
.fw-semibold, .fw-bold, .fw-bolder, .fw-boldest,
.section-title, .section-title-inner { font-weight: 500 !important; }
code, kbd, pre, samp, .shortcut { font-family: var(--font-mono) !important; }

.card {
  --bs-card-bg: var(--color-surface);
  --bs-card-border-color: var(--color-border);
  --bs-card-border-radius: var(--radius-surface);
  --bs-card-box-shadow: var(--shadow-xs);
}
.text-sidebar { color: var(--color-sidebar-text) !important; }
/* Tinted buttons put the action color on a tint; in dark mode that needs the
   lighter accent text to stay readable. Hover keeps KeenThemes' inverse. */
.btn.btn-light-primary { color: var(--color-text-accent); }
/* The sidebar's selected item uses a hard-coded color, not a variable. */
.app-sidebar-navs .menu .menu-item .menu-link.active {
  background-color: var(--color-brand-600);
  color: var(--color-sidebar-text);
}
:focus-visible { box-shadow: var(--shadow-ring-focus); outline: none; }