:root {
  --sg-color-bg: #ffffff;
  --sg-color-surface: #f6f6f4;
  --sg-color-surface-strong: #111111;
  --sg-color-surface-soft: #e7e8ea;
  --sg-color-text: #181818;
  --sg-color-text-soft: #5c5c5c;
  --sg-color-text-inverse: #ffffff;
  --sg-color-border: rgba(17, 17, 17, 0.16);
  --sg-color-border-strong: rgba(255, 255, 255, 0.4);
  --sg-color-accent: #e97207;
  --sg-color-accent-hover: #d46606;
  --sg-color-accent-soft: #ffdd2d;
  --sg-color-success: #1f7a43;
  --sg-color-error: #b42318;
  --sg-color-warning: #8a5a00;

  --sg-font-title: "Ubuntu", "Trebuchet MS", sans-serif;
  --sg-font-body: "Open Sans", "Segoe UI", sans-serif;

  --sg-space-2: 0.125rem;
  --sg-space-4: 0.25rem;
  --sg-space-8: 0.5rem;
  --sg-space-12: 0.75rem;
  --sg-space-16: 1rem;
  --sg-space-20: 1.25rem;
  --sg-space-24: 1.5rem;
  --sg-space-32: 2rem;
  --sg-space-40: 2.5rem;
  --sg-space-48: 3rem;
  --sg-space-64: 4rem;
  --sg-space-72: 4.5rem;

  --sg-radius-sm: 0.5rem;
  --sg-radius-md: 0.875rem;
  --sg-radius-lg: 1.25rem;
  --sg-radius-pill: 999px;

  --sg-shadow-card: 0 18px 50px rgba(17, 17, 17, 0.08);
  --sg-shadow-focus: 0 0 0 3px rgba(233, 114, 7, 0.24);

  --sg-container: 1180px;
  --sg-transition-fast: 160ms ease;
}