:root {
  /* Sentry expert-panel palette. Edit here to retheme both the landing and app. */
  --brand-font-family: "Vazirmatn", Tahoma, sans-serif;
  --brand-font-size: 16px;
  --brand-line-height: 1.8;
  --brand-radius: 0.75rem;

  /* Light mode: compact white expert terminal with restrained teal actions. */
  --brand-light-bg: #f0f2f5;
  --brand-light-surface: #ffffff;
  --brand-light-raised: #f6f7f9;
  --brand-light-muted-surface: #e8ebef;
  --brand-light-sidebar: #eef0f3;
  --brand-light-text: #20252b;
  --brand-light-muted: #68717b;
  --brand-light-subtle: #858c95;
  --brand-light-border: #d4d9df;
  --brand-light-accent: #0b8174;
  --brand-light-accent-hover: #0a7065;
  --brand-light-accent-ink: #ffffff;

  /* Dark mode: charcoal expert terminal with the original citron active state. */
  --brand-dark-bg: #0c0e11;
  --brand-dark-surface: #17191d;
  --brand-dark-raised: #202227;
  --brand-dark-text: #e3e5e8;
  --brand-dark-muted: #969ba3;
  --brand-dark-subtle: #737982;
  --brand-dark-border: #30343a;
  --brand-dark-accent: #d5ed00;
  --brand-dark-accent-hover: #e4f54a;
  --brand-dark-accent-ink: #171a09;

  --brand-danger: #d9434f;
  --brand-danger-dark: #ff6268;
  --brand-profit: #168447;
  --brand-profit-dark: #45d483;

  --brand-light-chart-1: #0b8174;
  --brand-light-chart-2: #477fa8;
  --brand-light-chart-3: #a77b32;
  --brand-light-chart-4: #7773a0;
  --brand-light-chart-5: #b14d54;
  --brand-dark-chart-1: #d5ed00;
  --brand-dark-chart-2: #75b4dc;
  --brand-dark-chart-3: #e4bd72;
  --brand-dark-chart-4: #aaa7d5;
  --brand-dark-chart-5: #ed8a90;

  /* Shared miniature terminal surfaces used by the landing-page product preview. */
  --brand-expert-panel: #17191d;
  --brand-expert-control: #111317;
  --brand-expert-control-raised: #202227;
  --brand-expert-text: #e3e5e8;
  --brand-expert-muted: #969ba3;
  --brand-expert-border: #30343a;
  --brand-expert-warning: #e8b34b;
}

html[data-theme="light"] {
  --brand-expert-panel: var(--brand-light-surface);
  --brand-expert-control: var(--brand-light-raised);
  --brand-expert-control-raised: var(--brand-light-muted-surface);
  --brand-expert-text: var(--brand-light-text);
  --brand-expert-muted: var(--brand-light-muted);
  --brand-expert-border: var(--brand-light-border);
}

.dark {
  --brand-expert-panel: var(--brand-dark-surface);
  --brand-expert-control: var(--brand-dark-bg);
  --brand-expert-control-raised: var(--brand-dark-raised);
  --brand-expert-text: var(--brand-dark-text);
  --brand-expert-muted: var(--brand-dark-muted);
  --brand-expert-border: var(--brand-dark-border);
}