:root {
    /* Core neutrals */
    --color-white: #ffffff;
    --color-white-rgb: 255 255 255;
    --color-black: #000000;
    --color-black-rgb: 0 0 0;

    --color-neutral-025: #fcfcfd;
    --color-neutral-050: #f8fafc;
    --color-neutral-075: #f7f9fc;
    --color-neutral-100: #f2f4f7;
    --color-neutral-150: #eef2f6;
    --color-neutral-200: #e5e7eb;
    --color-neutral-250: #e4e7ec;
    --color-neutral-300: #d0d5dd;
    --color-neutral-350: #cbd5e1;
    --color-neutral-500: #98a2b3;
    --color-neutral-500-rgb: 152 162 179;
    --color-neutral-600: #667085;
    --color-neutral-600-rgb: 102 112 133;
    --color-neutral-650: #5b6b73;
    --color-neutral-700: #526171;
    --color-neutral-725: #475467;
    --color-neutral-750: #364152;
    --color-neutral-800: #344054;
    --color-neutral-800-rgb: 52 64 84;
    --color-neutral-850: #1f2933;
    --color-neutral-875: #122033;
    --color-neutral-900: #101828;
    --color-neutral-925: #0f2024;
    --color-neutral-950: #0f172a;

    --color-neutral-850-rgb: 31 41 51;
    --color-neutral-900-rgb: 16 24 40;
    --color-neutral-925-rgb: 15 32 36;
    --color-neutral-950-rgb: 15 23 42;
    --color-neutral-050-rgb: 248 250 252;
    --color-neutral-075-rgb: 247 249 252;
    --color-neutral-100-rgb: 242 244 247;
    --color-neutral-125-rgb: 245 247 250;
    --color-neutral-150-rgb: 238 242 246;
    --color-neutral-200-rgb: 229 231 235;

    /* Brand */
    --color-primary: #00525e;
    --color-primary-rgb: 0 82 94;
    --color-primary-950: #002126;
    --color-primary-900: #0b3a42;
    --color-primary-900-rgb: 11 58 66;
    --color-primary-850: #0b4a56;
    --color-primary-800: #00525e;
    --color-primary-750: #075766;
    --color-primary-700: #06606f;
    --color-primary-650: #0d6674;
    --color-primary-600: #0a5561;
    --color-primary-200: #c7e3e6;
    --color-primary-150: #d8ecee;
    --color-primary-100: #e6f4f5;
    --color-primary-050: #f1f7f8;

    --color-secondary: #0a8a9c;
    --color-secondary-rgb: 10 138 156;
    --color-secondary-900: #0f766e;
    --color-secondary-900-rgb: 15 118 110;
    --color-secondary-850: #0b7285;
    --color-secondary-850-rgb: 11 114 133;
    --color-secondary-800: #127f8b;
    --color-secondary-800-rgb: 18 127 139;
    --color-secondary-700: #008aa8;
    --color-secondary-650: #0d9488;
    --color-secondary-650-rgb: 13 148 136;
    --color-secondary-600: #0a8a9c;
    --color-secondary-500: #14b8a6;
    --color-secondary-500-rgb: 20 184 166;
    --color-secondary-400: #68f0c7;
    --color-secondary-400-rgb: 104 240 199;
    --color-secondary-300: #22c55e;
    --color-secondary-200: #bfeeff;
    --color-secondary-100: #dff7ff;
    --color-secondary-050: #ecfeff;

    --color-accent: #71c5ff;
    --color-accent-rgb: 113 197 255;
    --color-accent-950: #16324f;
    --color-accent-900: #0d5f9a;
    --color-accent-800: #0b6bcb;
    --color-accent-700: #1d4ed8;
    --color-accent-600: #2563eb;
    --color-accent-600-rgb: 37 99 235;
    --color-accent-500: #71c5ff;
    --color-accent-400: #7fb8e6;
    --color-accent-300: #bfdbfe;
    --color-accent-300-rgb: 191 219 254;
    --color-accent-200: #dbeafe;
    --color-accent-100: #eff6ff;
    --color-accent-100-rgb: 239 246 255;
    --color-accent-050: #eff8ff;

    /* Status */
    --color-success: #027a48;
    --color-success-rgb: 2 122 72;
    --color-success-800: #046c43;
    --color-success-850: #228b22;
    --color-success-850-rgb: 34 139 34;
    --color-success-700: #027a48;
    --color-success-650: #10b981;
    --color-success-650-rgb: 16 185 129;
    --color-success-600: #039855;
    --color-success-500-rgb: 15 159 110;
    --color-success-500: #0f9f6e;
    --color-success-450: #16a34a;
    --color-success-450-rgb: 22 163 74;
    --color-success-400: #12b76a;
    --color-success-400-rgb: 18 183 106;
    --color-success-300: #22c55e;
    --color-success-200: #abefc6;
    --color-success-100: #d1fae5;
    --color-success-100-rgb: 209 250 229;
    --color-success-050: #ecfdf3;
    --color-success-750: #15803d;
    --color-success-750-rgb: 21 128 61;

    --color-warning: #f59e0b;
    --color-warning-rgb: 245 158 11;
    --color-warning-900: #92400e;
    --color-warning-900-rgb: 146 64 14;
    --color-warning-800: #b54708;
    --color-warning-800-rgb: 181 71 8;
    --color-warning-700: #d97706;
    --color-warning-700-rgb: 217 119 6;
    --color-warning-600: #f59e0b;
    --color-warning-500: #f5aa1c;
    --color-warning-250: #fed7aa;
    --color-warning-250-rgb: 254 215 170;
    --color-warning-400: #facc15;
    --color-warning-400-rgb: 250 204 21;
    --color-warning-300: #fedf89;
    --color-warning-200: #fde68a;
    --color-warning-100: #fff1d6;
    --color-warning-100-rgb: 255 241 214;
    --color-warning-050: #fff7e8;

    --color-danger: #dc2626;
    --color-danger-rgb: 220 38 38;
    --color-danger-950: #b22222;
    --color-danger-950-rgb: 178 34 34;
    --color-danger-900: #991b1b;
    --color-danger-900-rgb: 153 27 27;
    --color-danger-800: #b42318;
    --color-danger-800-rgb: 180 35 24;
    --color-danger-700: #d92d20;
    --color-danger-700-rgb: 217 45 32;
    --color-danger-600: #dc2626;
    --color-danger-400: #f97066;
    --color-danger-250: #fca5a5;
    --color-danger-250-rgb: 252 165 165;
    --color-danger-300: #fecaca;
    --color-danger-200: #fecdca;
    --color-danger-100: #fee2e2;
    --color-danger-050: #fef3f2;

    --color-info: #2563eb;
    --color-info-rgb: 37 99 235;
    --color-info-800: #1849a9;
    --color-info-700: #175cd3;
    --color-info-600: #2563eb;
    --color-info-250: #93c5fd;
    --color-info-250-rgb: 147 197 253;
    --color-info-300: #b2ddff;
    --color-info-200: #bfdbfe;
    --color-info-100: #dbeafe;
    --color-info-050: #eff8ff;

    --color-violet: #a855f7;
    --color-violet-rgb: 168 85 247;
    --color-violet-800: #5b21b6;
    --color-violet-700: #6d28d9;
    --color-violet-700-rgb: 109 40 217;
    --color-violet-600: #7456ff;
    --color-violet-600-rgb: 116 86 255;
    --color-violet-200: #ede9fe;
    --color-violet-100: #ede9fe;
    --color-orange: #f97316;
    --color-orange-rgb: 249 115 22;
    --color-red: #ef4444;
    --color-red-rgb: 239 68 68;

    /* Shared cool surfaces and borders */
    --color-surface-cool-050: #fbfffd;
    --color-surface-cool-100: #f9fcfd;
    --color-surface-cool-150: #f6fbfd;
    --color-surface-cool-200: #f4f8fa;
    --color-surface-cool-250: #f1f7f8;
    --color-surface-cool-300: #eef4f7;
    --color-surface-cool-350: #edf2f7;
    --color-surface-cool-400: #e2e8f0;
    --color-surface-cool-450: #dbe3ee;

    --color-border-cool-100: #e2e8f0;
    --color-border-cool-200: #dbe3ee;
    --color-border-cool-250: #d7e6eb;
    --color-border-cool-300: #b8c5d1;
    --color-border-cool-100-rgb: 226 232 240;
    --color-border-cool-200-rgb: 219 227 238;
    --color-border-cool-225-rgb: 216 227 232;
    --color-border-cool-250-rgb: 215 230 235;
    --color-border-cool-275-rgb: 223 236 242;
    --color-border-cool-300-rgb: 184 197 209;

    --color-overlay-dark-rgb: 10 11 12;
    --color-overlay-panel-rgb: 8 17 29;
    --color-overlay-menu-rgb: 7 14 25;
    --color-overlay-black-rgb: 0 0 0;

    --color-warning-025: #fffbeb;
    --color-warning-075: #fff7ed;
    --color-success-025: #f5fff8;
    --color-success-075: #f5fbf8;
    --color-success-125: #f7fffc;
    --color-danger-075: #fff7f6;
    --color-danger-025: #fffafa;

    /* Semantic aliases */
    --color-background: var(--color-neutral-025);
    --color-surface: var(--color-white);
    --color-surface-alt: var(--color-neutral-050);
    --color-surface-raised: var(--color-neutral-025);
    --color-surface-tint: var(--color-neutral-150);
    --color-surface-hover: var(--color-neutral-100);
    --color-surface-overlay: rgb(var(--color-white-rgb) / 0.84);
    --color-surface-overlay-strong: rgb(var(--color-white-rgb) / 0.96);
    --color-surface-overlay-subtle: rgb(var(--color-white-rgb) / 0.72);
    --color-surface-overlay-soft: rgb(var(--color-white-rgb) / 0.16);
    --color-surface-dark-overlay: rgb(var(--color-overlay-dark-rgb) / 0.62);
    --color-surface-dark-overlay-strong: rgb(var(--color-overlay-dark-rgb) / 0.9);

    --color-border: var(--color-neutral-200);
    --color-border-light: var(--color-neutral-250);
    --color-border-muted: var(--color-neutral-300);
    --color-border-strong: var(--color-neutral-350);
    --color-border-overlay: rgb(var(--color-white-rgb) / 0.16);
    --color-border-overlay-strong: rgb(var(--color-white-rgb) / 0.52);
    --color-border-cool: var(--color-border-cool-200);
    --color-border-cool-soft: var(--color-border-cool-100);
    --color-border-cool-strong: var(--color-border-cool-300);

    --color-text-primary: var(--color-neutral-900);
    --color-text-secondary: var(--color-neutral-800);
    --color-text-tertiary: var(--color-neutral-725);
    --color-text-muted: var(--color-neutral-600);
    --color-text-subtle: var(--color-neutral-500);
    --color-text-heading: var(--color-neutral-875);
    --color-text-body: var(--color-neutral-700);
    --color-text-disabled: #7b8794;
    --color-text-placeholder: var(--color-neutral-500);
    --color-text-inverse: rgb(var(--color-white-rgb) / 0.92);
    --color-text-inverse-muted: rgb(var(--color-white-rgb) / 0.82);
    --color-text-inverse-subtle: rgb(var(--color-white-rgb) / 0.72);
    --color-text-inverse-faint: rgb(var(--color-white-rgb) / 0.62);

    --color-chart-produced: var(--color-success-500);
    --color-chart-imported: var(--color-accent-600);
    --color-chart-exported: var(--color-violet);
    --color-chart-consumed: var(--color-orange);
    --color-chart-distance: var(--color-red);

    --color-map-marker: var(--color-success-300);
    --color-map-site-marker: var(--color-secondary-900);
    --color-map-outline: var(--color-accent-900);
    --color-map-fill: var(--color-accent-400);

    /* Shadows */
    --shadow-xs: 0 1px 3px rgb(var(--color-neutral-950-rgb) / 0.08);
    --shadow-sm: 0 10px 24px rgb(var(--color-neutral-950-rgb) / 0.05);
    --shadow-md: 0 18px 36px rgb(var(--color-primary-rgb) / 0.14);
    --shadow-lg: 0 20px 45px rgb(var(--color-neutral-900-rgb) / 0.16);

    /* Existing workspace aliases */
    --vvb-color-text-primary: var(--color-text-primary);
    --vvb-color-text-secondary: var(--color-text-secondary);
    --vvb-color-text-tertiary: var(--color-text-tertiary);
    --vvb-color-text-muted: var(--color-text-muted);
    --vvb-color-text-subtle: var(--color-text-subtle);

    --vvb-color-surface: var(--color-surface);
    --vvb-color-surface-alt: var(--color-surface-alt);
    --vvb-color-surface-raised: var(--color-surface-raised);
    --vvb-color-surface-tint: var(--color-surface-tint);
    --vvb-color-surface-hover: var(--color-surface-hover);

    --vvb-color-border: var(--color-border);
    --vvb-color-border-light: var(--color-border-light);
    --vvb-color-border-muted: var(--color-border-muted);
    --vvb-color-border-strong: var(--color-border-strong);

    --vvb-color-success: var(--color-success);
    --vvb-color-success-bg: var(--color-success-050);
    --vvb-color-warning: var(--color-warning-800);
    --vvb-color-warning-accent: var(--color-warning);
    --vvb-color-warning-bg: var(--color-warning-050);
    --vvb-color-warning-badge: var(--color-warning-300);
    --vvb-color-danger: var(--color-danger-800);
    --vvb-color-danger-accent: var(--color-danger);
    --vvb-color-danger-bg: var(--color-danger-050);
    --vvb-color-info: var(--color-info);
    --vvb-color-info-bg: var(--color-accent-100);
    --vvb-color-info-light: var(--color-accent-200);
    --vvb-color-info-ring: var(--color-accent-300);

    --vvb-shadow-xs: var(--shadow-xs);
    --vvb-shadow-sm: var(--shadow-sm);
    --vvb-shadow-md: var(--shadow-md);

    /* Kendo button tokens */
    --vvb-color-button-base-from: var(--color-white);
    --vvb-color-button-base-to: var(--color-neutral-050);
    --vvb-color-button-base-hover-from: var(--color-white);
    --vvb-color-button-base-hover-to: #f2f7fa;
    --vvb-color-button-base-border-hover: #b8c5d1;

    --vvb-color-button-primary-from: var(--color-primary-900);
    --vvb-color-button-primary-to: var(--color-primary);
    --vvb-color-button-primary-border: var(--color-primary-850);
    --vvb-color-button-primary-shadow: 0 10px 22px rgb(var(--color-primary-rgb) / 0.18);
    --vvb-color-button-primary-hover-from: #0d4650;
    --vvb-color-button-primary-hover-to: var(--color-primary-700);
    --vvb-color-button-primary-border-hover: var(--color-primary-750);

    --vvb-color-button-success-from: var(--color-success);
    --vvb-color-button-success-to: var(--color-success-600);
    --vvb-color-button-success-border: var(--color-success-700);
    --vvb-color-button-success-shadow: 0 10px 22px rgb(var(--color-success-rgb) / 0.16);
    --vvb-color-button-success-hover-from: var(--color-success-800);
    --vvb-color-button-success-hover-to: var(--color-success);
    --vvb-color-button-success-border-hover: #05603a;

    --vvb-color-button-warning-from: var(--color-warning);
    --vvb-color-button-warning-to: var(--color-warning-700);
    --vvb-color-button-warning-border: var(--color-warning-700);
    --vvb-color-button-warning-shadow: 0 10px 22px rgb(var(--color-warning-700-rgb) / 0.18);
    --vvb-color-button-warning-hover-from: var(--color-warning-500);
    --vvb-color-button-warning-hover-to: #e38309;
    --vvb-color-button-warning-border-hover: #c06c05;

    --vvb-color-button-focus-ring: 0 0 0 4px rgb(var(--color-primary-rgb) / 0.14), 0 12px 24px rgb(var(--color-neutral-950-rgb) / 0.10);
    --vvb-color-button-hover-shadow: 0 12px 24px rgb(var(--color-neutral-950-rgb) / 0.10);

    /* Menu shell */
    --trace-menu-bg: var(--color-primary-950);
    --trace-menu-bg-raised: #063039;
    --trace-menu-text-rgb: 243 247 253;
    --trace-menu-surface: rgb(var(--color-white-rgb) / 0.05);
    --trace-menu-surface-strong: rgb(var(--color-accent-rgb) / 0.14);
    --trace-menu-border: rgb(180 194 216 / 0.14);
    --trace-menu-border-strong: rgb(var(--color-accent-rgb) / 0.42);
    --trace-menu-text: #f3f7fd;
    --trace-menu-text-muted: #9fafc4;
    --trace-menu-text-subtle: #7f90aa;
    --trace-menu-stage: var(--color-secondary-400);
    --trace-menu-stage-soft: rgb(104 240 199 / 0.12);
    --trace-menu-active-bar: var(--color-accent);
    --trace-menu-focus: rgb(var(--color-accent-rgb) / 0.28);

    /* Project onboarding aliases */
    --project-onboard-teal-900: var(--color-primary-900);
    --project-onboard-teal-800: var(--color-primary);
    --project-onboard-teal-600: #1d8b7c;
    --project-onboard-surface: var(--color-surface);
    --project-onboard-surface-alt: var(--color-surface-alt);
    --project-onboard-border: var(--color-border);
    --project-onboard-border-soft: var(--color-surface-tint);
    --project-onboard-text: var(--color-text-primary);
    --project-onboard-muted: var(--color-text-muted);
    --project-onboard-muted-strong: var(--color-text-tertiary);
    --project-onboard-danger: var(--color-danger-800);

    /* Bootstrap aliases */
    --bs-primary: var(--color-primary);
    --bs-secondary: var(--color-text-muted);
    --bs-success: var(--color-success);
    --bs-info: var(--color-info);
    --bs-warning: var(--color-warning);
    --bs-danger: var(--color-danger);
    --bs-light: var(--color-surface-alt);
    --bs-dark: var(--color-text-primary);
    --bs-body-bg: var(--color-background);
    --bs-body-color: var(--color-text-primary);
    --bs-border-color: var(--color-border);
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-700);

    /* Global Kendo aliases */
    --kendo-color-primary: var(--color-primary);
    --kendo-color-primary-hover: var(--color-primary-700);
    --kendo-color-primary-active: var(--color-primary-900);
    --kendo-color-primary-emphasis: rgb(var(--color-primary-rgb) / 0.24);
    --kendo-color-on-primary: var(--color-white);
    --kendo-color-success: var(--color-success);
    --kendo-color-success-hover: var(--color-success-600);
    --kendo-color-success-active: var(--color-success-800);
    --kendo-color-warning: var(--color-warning);
    --kendo-color-warning-hover: var(--color-warning-500);
    --kendo-color-warning-active: var(--color-warning-700);
    --kendo-color-error: var(--color-danger);
    --kendo-color-error-hover: var(--color-danger-800);
    --kendo-color-error-active: var(--color-danger-900);
    --kendo-color-info: var(--color-info);
    --kendo-color-info-hover: var(--color-info-700);
    --kendo-color-info-active: var(--color-info-800);
}

.trace-brand-logo {
    background: center / contain no-repeat url("/icons/logo_white.svg");
}

.trace-brand-logo img {
    opacity: 0;
}