:root {
  color-scheme: dark;

  --d2-accent-100: #fff1c7;
  --d2-accent-300: #ffc24b;
  --d2-accent-400: #ffae2f;
  --d2-accent-500: #ff9c18;
  --d2-accent-600: #f97316;
  --d2-accent-700: #d95708;
  --d2-accent-rgb: 255, 156, 24;

  --d2-bg: #07090f;
  --d2-surface: #10131c;
  --d2-surface-raised: #171b26;
  --d2-surface-strong: #151925;
  --d2-surface-muted: #202534;
  --d2-surface-track: #242938;
  --d2-control-muted: #404656;
  --d2-text: #f7f8fb;
  --d2-text-soft: #e8eaf0;
  --d2-text-heading-muted: #dfe3ec;
  --d2-text-subtle: #e2e5eb;
  --d2-text-secondary: #d3d7df;
  --d2-text-muted: #c5cad5;
  --d2-text-quiet: #bbc1cd;
  --d2-text-faint: #adb5c4;
  --d2-text-disabled: #9da6b6;
  --d2-line: rgba(255, 255, 255, .09);

  --d2-gradient-accent: linear-gradient(135deg, #ffc24b 0%, #ff9c18 46%, #f97316 100%);
  --d2-gradient-surface: linear-gradient(145deg, rgba(24, 29, 42, .98), rgba(12, 15, 23, .98));
  --d2-shadow-accent: 0 14px 36px rgba(255, 156, 24, .24);
  --d2-focus-ring: 0 0 0 3px rgba(255, 156, 24, .28);

  --d2-radius-sm: 10px;
  --d2-radius-md: 14px;
  --d2-radius-lg: 20px;
  --d2-radius-xl: 24px;
}

.d2-theme {
  background: var(--d2-bg);
  color: var(--d2-text);
}

.d2-surface {
  background: var(--d2-gradient-surface);
  border: 1px solid var(--d2-line);
  border-radius: var(--d2-radius-lg);
}

.d2-button-primary {
  color: #fff;
  background: var(--d2-gradient-accent);
  border: 0;
  border-radius: var(--d2-radius-md);
  box-shadow: var(--d2-shadow-accent);
}

.d2-button-primary:focus-visible,
.d2-link:focus-visible {
  outline: none;
  box-shadow: var(--d2-focus-ring);
}

.d2-accent-text,
.d2-link {
  color: var(--d2-accent-300);
}