:root {
  color-scheme: light;
  --fdf-color-canvas: #f4f6f4;
  --fdf-color-surface: #ffffff;
  --fdf-color-surface-subtle: #f7f9f7;
  --fdf-color-text: #18231d;
  --fdf-color-text-muted: #526158;
  --fdf-color-brand: #963e19;
  --fdf-color-brand-hover: #783015;
  --fdf-color-brand-subtle: #f7ede8;
  --fdf-color-border: #d2d8d3;
  --fdf-color-border-strong: #9da9a1;
  --fdf-color-focus: #005fcc;
  --fdf-color-success: #17663a;
  --fdf-color-success-bg: #edf7f1;
  --fdf-color-warning: #8a5400;
  --fdf-color-error: #9b1c1c;
  --fdf-color-error-bg: #fff4f4;
  --fdf-space-1: 4px;
  --fdf-space-2: 8px;
  --fdf-space-3: 12px;
  --fdf-space-4: 16px;
  --fdf-space-5: 20px;
  --fdf-space-6: 24px;
  --fdf-space-8: 32px;
  --fdf-space-12: 48px;
  --fdf-space-16: 64px;
  --fdf-radius-sm: 4px;
  --fdf-radius-md: 6px;
  --fdf-radius-lg: 8px;
  --fdf-shadow-panel: 0 12px 32px rgb(23 32 25 / 8%);
  --fdf-content-max: 1200px;
  --fdf-control-min: 44px;
}