:root,
[data-theme="light"] {
  --fusion-color: #e63c11;
  --primary-color: #4f39f6;
  --primary-color-alpha: #4f39f626; /* 15% opacity */
  --primary-color-hover: #402ecf;
  --text-prim: #0f172b;
  --text-sec: #45556c;
  --text-suggestion: #90a1b9;
  --text-white: #ffffff;
  --text-black: #000000;
  --surface: #f8fafc;
  --surface-background: #f8fafc;
  --surface-nav-1: #fdfdfe;
  --surface-nav-2: #fdfdfe;
  --surface-section: #ffffff;
  --stroke: #e2e8f0;
  --stroke-alpha: #e2e8f0;
  --alert-blocker-highlight: #fb2c36;
  --alert-blocker-text: #c2142a;
  --alert-blocker-surface: #faeaec;
  --alert-high-critical-highlight: #f07605;
  --alert-high-critical-text: #6b461a;
  --alert-high-critical-surface: #fcebde;
  --alert-medium-major-highlight: #ffc44f;
  --alert-medium-major-text: #4d3f09;
  --alert-medium-major-surface: #fcf1cf;
  --alert-low-minor-highlight: #00c950;
  --alert-low-minor-text: #183215;
  --alert-low-minor-surface: #e3f4e1;
  --alert-info-highlight: #2c91fd;
  --alert-info-text: #15244c;
  --alert-info-surface: #e2e9f8;
  --ui-focus: #3b82f6;
  --ui-text-invert: #ffffff;
  --ui-text-prim-cta: #ffffff;
  --ui-surface-prim-generic-cta: #0f172b;
  --ui-surface-prim-generic-cta-hover: #4f39f6;
  --ui-text-sec-cta: #45556c;
  --ui-surface-sec-generic-cta: #ffffff;
  --ui-surface-sec-generic-cta-hover: #4f39f61a;
  --ui-text-sec-creative-cta: #12874a;
  --ui-surface-sec-creative-cta: #afdfbd80;
  --ui-surface-sec-creative-cta-hover: #12874a33;
  --ui-text-sec-destruc-cta: #d63f3f;
  --ui-surface-sec-destruc-cta: #fce1de;
  --ui-surface-sec-destruc-cta-hover: #f8b7b0;
  --ui-surface-toggle-editor: #f8fafc;
  --ui-surface-card: #f5f7fa;
  --ui-surface-zebra: #dae2e7;
  --ui-surface-popup: #ffffffe6;
  --ui-shadow: #45556c26;
  --ui-shadow-ia-1: #e63c114d;
  --ui-shadow-ia-2: #e63c114d;
  --ui-surface-table-header: #ffffff;
  --ui-surface-table-header-selected: #4f39f61a;
  --ui-pattern: #d9dede;
  --blue-text: #204bd9;
  --blue-surface: #2256fa;
  --blue-surface-dimmed: #ecf7ff;
  --green-text: #1d4f33;
  --green-surface: #afdfbd;
  --green-surface-hover: #3bbf6a;
  --green-surface-dimmed: #f0fdf6;
  --orange-text: #ad612d;
  --orange-surface: #ff9a1c;
  --orange-surface-dimmed: #fef9e8;
  --yellow-text: #ad612d;
  --yellow-surface: #ff9a1c;
  --yellow-surface-dimmed: #fef9e8;
  --red-text: #841821;
  --red-surface: #cd2627;
  --red-surface-dimmed: #fef0f0;
  --purple-text: #3c2bb1;
  --purple-surface: #5248e4;
  --purple-surface-dimmed: #ecebfd;
  --pink-text: #903e57;
  --pink-surface: #e35f84;
  --pink-surface-dimmed: #feeef2;
  --cerulean-text: #275e7b;
  --cerulean-surface: #4189b9;
  --cerulean-surface-dimmed: #e6f8ff;
  --grey-text: #555555;
  --grey-surface: #4d4d4d;
  --grey-surface-dimmed: #f0f0f0;
  --white-text: #ffffff;
  --white-surface: #ffffff33;
  --red-critical: #fb2c36;
  --yellow-warning: #f0b100;
  --green-healthy: #00c950;
  --green: #10b981;
  --green-alpha: #10b98133;
  --white: #ffffff;
  --red: #d63f3f;
  --red-hover: #b92727;
  --topbar-bg: rgba(255, 255, 255, 0.7);
}

:root[data-theme="dark"],
[data-theme="dark"] {
  --fusion-color: #e63c11;
  --primary-color: #4f39f6;
  --primary-color-alpha: #4f39f666; /* 40% opacity */
  --primary-color-hover: #402ecf;
  --text-prim: #e5e5e5;
  --text-sec: #8c8e8d;
  --text-suggestion: #727473;
  --text-white: #ffffff;
  --text-black: #000000;
  --surface-background: #000000;
  --surface-nav-1: #0d0e0f;
  --surface-nav-2: #0c0dOcb3; /* 70% opacity */
  --surface-section: #0c0d0d;
  --stroke: #2d2f2e;
  --stroke-alpha: #2d2f2e4d; /* 30% opacity */
  --alert-blocker-highlight: #fb2c2f;
  --alert-blocker-text: #f2c9ce;
  --alert-blocker-surface: #6e2521;
  --alert-high-critical-highlight: #fba52c;
  --alert-high-critical-text: #e7d1b6;
  --alert-high-critical-surface: #4f2d11;
  --alert-medium-major-highlight: #ffd54f;
  --alert-medium-major-text: #f6f0cd;
  --alert-medium-major-surface: #4f4722;
  --alert-low-minor-highlight: #00c950;
  --alert-low-minor-text: #d6f3d3;
  --alert-low-minor-surface: #183215;
  --alert-info-highlight: #2caafd;
  --alert-info-text: #d3dcf3;
  --alert-info-surface: #202c4b;
  --ui-focus: #3b82f6;
  --ui-text-invert: #282828;
  --ui-text-prim-cta: #000000;
  --ui-surface-prim-generic-cta: #ffffff;
  --ui-surface-prim-generic-cta-hover: #e5e5e5;
  --ui-text-sec-cta: #ffffff;
  --ui-surface-sec-generic-cta: #0f0f0f;
  --ui-surface-sec-generic-cta-hover: #1b1d1c;
  --ui-text-sec-creative-cta: #00c853;
  --ui-surface-sec-creative-cta: #69c38926;
  --ui-surface-sec-creative-cta-hover: #12874a4d;
  --ui-text-sec-destruc-cta: #ca2b2b;
  --ui-surface-sec-destruc-cta: #fce1de;
  --ui-surface-sec-destruc-cta-hover: #f8b7b0;
  --ui-surface-toggle-editor: #f8fafc;
  --ui-surface-card: #1b1b1d;
  --ui-surface-zebra: #2e2e2e;
  --ui-surface-popup: #000000e6;
  --ui-shadow: #000000;
  --ui-shadow-ia-1: #e63c1126;
  --ui-shadow-ia-2: #e63c1133;
  --ui-surface-table-header: #1d293d80;
  --ui-surface-table-header-selected: #4f39f666;
  --ui-pattern: #1a1e1e;
  --blue-text: #204bd9;
  --blue-surface: #2256fa;
  --blue-surface-dimmed: #ecf7ff;
  --green-text: #1d4f33;
  --green-surface: #69c389;
  --green-surface-hover: #47b36d;
  --green-surface-dimmed: #f0fdf6;
  --orange-text: #ca3500;
  --orange-surface: #ff9a1c;
  --orange-surface-dimmed: #ffedd4;
  --yellow-text: #794802;
  --yellow-surface: #ffd600;
  --yellow-surface-dimmed: #fff7cb;
  --red-text: #841821;
  --red-surface: #cd2627;
  --red-surface-dimmed: #fef0f0;
  --purple-text: #3c2bb1;
  --purple-surface: #5248e4;
  --purple-surface-dimmed: #ecebfd;
  --pink-text: #903e57;
  --pink-surface: #e35f84;
  --pink-surface-dimmed: #feeef2;
  --cerulean-text: #275e7b;
  --cerulean-surface: #4189b9;
  --cerulean-surface-dimmed: #e6f8ff;
  --grey-text: #555555;
  --grey-surface: #4d4d4d;
  --grey-surface-dimmed: #f0f0f0;
  --white-text: #ffffff;
  --white-surface: #ffffff33;
  --red-critical: #fb2c36;
  --yellow-warning: #ffd54f;
  --green-healthy: #00c950;
  --green: #10b981;
  --green-alpha: #10b98133;
  --white: #ffffff;
  --red: #d63f3f;
  --red-hover: #b92727;
  --topbar-bg: rgba(12, 13, 12, 0.7);
}

/* Colors */
.text-orange {
  background: linear-gradient(90deg, #e63c11 0%, #f05d38 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Typography */

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
button,
li,
textarea {
  font-family: "Inter", sans-serif;
}

h1 {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.35px;
  font-weight: 700;
  color: var(--text-prim);
}

h2 {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.35px;
  font-weight: 700;
  color: var(--text-prim);
}

h3 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.35px;
  font-weight: 700;
  color: var(--text-prim);
}

h4 {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.15px;
  font-weight: 700;
  color: var(--text-prim);
}

p {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.3px;
  font-weight: 500;
  color: var(--text-prim);
}

p.small {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  font-weight: 400;
  color: var(--text-prim);
}

p.big {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -1px;
  font-weight: 700;
  color: var(--text-prim);
}

p.secondary {
  color: var(--text-sec);
}

.action {
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0px;
  font-weight: 600;
  color: var(--text-prim);
}

.action-cap {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-prim);
}

.kpi-big {
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -0.85px;
  font-weight: 700;
  color: var(--text-prim);
}

.kpi-medium {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: 0.4px;
  font-weight: 700;
  color: var(--text-prim);
}

textarea {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-prim);
}

textarea::placeholder {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-suggestion);
}

/* Shadow */
.shadow-small {
  box-shadow: 0 0 4px 0 var(--ui-shadow);
}

.shadow-medium {
  box-shadow:
    0 4px 4px 0 var(--ui-shadow),
    0 1px 16px 0 var(--ui-shadow);
}

.shadow-big {
  box-shadow: 0 4px 24px -4px var(--ui-shadow);
}

.shadow-generic {
  box-shadow:
    0 10px 16px -4px var(--ui-shadow),
    0 4px 8px -4px var(--ui-shadow);
}

.shadow-text-filed-ia {
  box-shadow:
    0 4px 16px -4px var(--ui-shadow-ia-1),
    0 4px 16px -4px var(--ui-shadow-ia-2);
}

.shadow-card-graph-view {
  box-shadow: 0 0 24px -4px var(--ui-shadow);
}

.shadow-panel-left {
  box-shadow: 10px 0 24px -4px var(--ui-shadow);
}

.shadow-panel-right {
  box-shadow: -10px 0 24px -4px var(--ui-shadow);
}

/* Border */
.border-radius {
  border-radius: 8px;
}

/* Buttons */

button {
  display: inline-flex;
  height: 40px;
  padding: 0 16px;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  background: var(--ui-surface-prim-generic-cta);
  box-shadow:
    0 10px 16px -4px var(--ui-shadow),
    0 4px 8px -4px var(--ui-shadow);
  border: none;
  color: var(--ui-text-prim-cta);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  transition: all 0.3s ease-in-out;
}

button span {
  color: var(--ui-text-prim-cta) !important;
}

button.no-shadow {
  box-shadow: none;
}

button.rounded {
  border-radius: 999px !important;
}

button.gray-light {
  background: #4d4d4d;
  color: #ffffff !important;
  border: 1px solid #4d4d4d;
}

button.gray-light:hover {
  background: #4d4d4d;
  color: #ffffff !important;
  border: 1px solid #4d4d4d;
}

button.gray-light.pressed {
  background: #4d4d4d;
  color: #ffffff !important;
  border: 1px solid #4d4d4d;
}

button.gray {
  background: #202938;
  color: #ffffff !important;
  border: 1px solid #202938;
}

button.gray:hover {
  background: #202938;
  color: #ffffff !important;
  border: 1px solid #202938;
}

button.gray.pressed {
  background: #202938;
  color: #ffffff !important;
  border: 1px solid #202938;
}

button.orange {
  background: #ea580b;
  color: #ffffff !important;
  border: 1px solid #ea580b;
}

button.orange:hover {
  background: #ea580b;
  color: #ffffff !important;
  border: 1px solid #ea580b;
}

button.orange.pressed {
  background: #ea580b;
  color: #ffffff !important;
  border: 1px solid #ea580b;
}

button.secondary {
  background: var(--ui-surface-sec-generic-cta);
  color: var(--ui-text-sec-cta) !important;
  border: 1px solid var(--stroke);
  font-weight: 600;
}

button.secondary span {
  color: var(--ui-text-sec-cta) !important;
}

button.secondary:hover {
  background: var(--primary-color-alpha);
  color: var(--ui-text-sec-cta) !important;
}

button.secondary.pressed {
  border-color: var(--primary-color);
  color: var(--ui-text-sec-cta) !important;
}

button.tertiary {
  background: var(--ui-surface-sec-generic-cta);
  color: var(--ui-text-sec-cta) !important;
}

button.tertiary span {
  color: var(--ui-text-sec-cta) !important;
}

button.tertiary:hover {
  background: var(--primary-color-alpha);
  color: var(--ui-text-sec-cta) !important;
}

button.tertiary.pressed {
  border-color: var(--primary-color);
  color: var(--ui-text-sec-cta) !important;
}

button.no-text {
  padding: 0;
  justify-content: center;
  width: 40px;
}

button span {
  font-size: 20px;
}

button.medium {
  height: 32px;
}

button.medium.no-text {
  padding: 0;
  justify-content: center;
  width: 32px;
}

button.medium span {
  font-size: 16px;
}

button.small {
  height: 24px;
  padding: 0 12px;
  border-radius: 4px;
}

button.small.no-text {
  padding: 0;
  justify-content: center;
  width: 24px;
}

button.small span {
  font-size: 16px;
}

button:hover {
  background: var(--ui-surface-prim-generic-cta-hover);
}

button.pressed {
  border: 1px solid var(--primary-color);
  background: var(--ui-surface-sec-generic-cta);
  color: var(--ui-text-sec-cta) !important;
}

button:disabled {
  opacity: 0.4;
  pointer-events: none;
}

button.creative {
  background: var(--green-surface);
  color: #000000;
  font-weight: 600;
}

button.creative span {
  color: #000000 !important;
}

button.creative.secondary {
  background: var(--ui-surface-sec-creative-cta);
  color: var(--ui-text-sec-creative-cta) !important;
  border: none;
}

button.creative.tertiary {
  background: transparent;
  color: var(--ui-text-sec-creative-cta) !important;
  border: none;
}

button.creative:hover {
  background: var(--green-surface-hover);
}

button.creative.secondary:hover {
  background: var(--ui-surface-sec-creative-cta-hover);
  color: var(--ui-text-sec-creative-cta) !important;
}

button.creative.tertiary:hover {
  background: var(--ui-surface-sec-creative-cta-hover);
}

button.creative.pressed {
  border-color: var(--green-surface);
  background: var(--ui-surface-sec-generic-cta);
}

button.destructive {
  background: var(--red);
}

button.destructive.secondary {
  background: var(--ui-surface-sec-destruc-cta);
  color: var(--ui-text-sec-destruc-cta) !important;
  border: none;
}

button.destructive.tertiary {
  background: transparent;
  color: var(--ui-text-sec-destruc-cta) !important;
  border: none;
}

button.destructive:hover {
  background: var(--red-hover);
}

button.destructive.secondary:hover {
  background: var(--ui-surface-sec-destruc-cta-hover);
  color: var(--ui-text-sec-destruc-cta);
  border: none;
}

button.destructive.tertiary:hover {
  background: var(--ui-surface-sec-destruc-cta-hover);
  color: var(--ui-text-sec-destruc-cta);
  border: none;
}

button.destructive.pressed {
  border-color: var(--red);
  background: var(--ui-surface-sec-generic-cta);
}

/* Links */

a {
  text-decoration: none;
}

/* Global */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: var(--surface-background);
}

* {
  box-sizing: border-box;
}

.wrapper {
  width: 95%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}