[data-gantt-host] .sg-root {
  --sg-font: "Inter", system-ui, sans-serif;
  --sg-font-size: 13px;
  --sg-bar: var(--color-secondary);
  --sg-bar-critical: var(--color-primary);
  --sg-bar-critical-stroke: color-mix(in oklab, var(--color-primary) 80%, black);
  --sg-payment: var(--color-neutral);
  --sg-payment-stroke: var(--color-neutral);
  --sg-focus: var(--color-primary);
  --sg-today: var(--color-primary);
  --sg-holiday: color-mix(in oklab, var(--color-base-content) 10%, transparent);
  --sg-weekend: color-mix(in oklab, var(--color-base-content) 4%, transparent);
  --sg-bg: #ffffff;
  --sg-header-bg: var(--color-base-200);
  --sg-grid-line: var(--color-base-300);
  --sg-row-alt: color-mix(in oklab, var(--color-base-200) 40%, transparent);
  --sg-radius: 12px;
  --sg-modal-radius: 16px;
  --sg-bar-radius: 6px;
  --sg-button-primary-bg: var(--color-primary);
  --sg-button-primary-fg: var(--color-primary-content);
  --sg-cta-bg: var(--color-primary);
  --sg-cta-fg: var(--color-primary-content);
  --sg-cta-radius: 999px;
  --sg-rail-bg: var(--color-base-200);
  --sg-height: 500px;
}

[data-gantt-host] .sg-cta {
  background: linear-gradient(90deg, #F66B0E 0%, #F17A14 100%);
  box-shadow: 0 8px 32px -4px rgba(246, 107, 14, 0.55);
}

@media (max-width: 767px) {
  [data-gantt-host] .sg-root {
    --sg-height: 420px;
  }
}