:root {
  /* ─── Brand Colors ─── */
  --color-bg:           #FAF8F5;
  --color-text:         #1A1A1A;
  --color-accent:       #1E4D2B;
  --color-secondary:    #4A5568;
  --color-border:       #E2E0DB;

  /* ─── Traffic Light Colors (demo section only) ─── */
  --color-profit:       #22543D;
  --color-profit-bg:    #F0FFF4;
  --color-warning:      #D69E2E;
  --color-warning-bg:   #FFFBEB;
  --color-danger:       #E53E3E;
  --color-danger-bg:    #FFF5F5;

  /* ─── Typography ─── */
  --font-serif:         'Playfair Display', Georgia, serif;
  --font-sans:          'Inter', system-ui, sans-serif;

  --font-size-hero:     clamp(2.5rem, 5vw, 4rem);
  --font-size-h2:       clamp(1.8rem, 3vw, 2.5rem);
  --font-size-h3:       1.25rem;
  --font-size-body:     1rem;
  --font-size-small:    0.875rem;

  --line-height-heading: 1.15;
  --line-height-body:    1.7;

  /* ─── Spacing ─── */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   8rem;

  --section-padding-mobile:  4rem;
  --section-padding-desktop: 6rem;

  /* ─── Layout ─── */
  --max-width:       760px;
  --content-padding: 1.25rem;

  /* ─── Buttons ─── */
  --btn-radius:  6px;
  --btn-padding: 0.875rem 2rem;

  /* ─── Borders & Shadows ─── */
  --border-radius-card: 10px;
  --box-shadow-card: 0 2px 16px rgba(0, 0, 0, 0.07);

  /* ─── Transitions ─── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
}