:root {
  /* Brand palette — see docs/BRANDING.md §3 */
  --color-primary:       #3ecf74;
  --color-primary-soft:  #d9f2e2;
  --color-primary-dark:  #145a32;
  --color-accent:        #c8230a;
  --color-accent-light:  #e85a3e;
  --color-warning:       #d89b2d;
  --color-dark:          #1a2420;
  --color-dark-alt:      #232d28;
  --color-gray:          #6b726e;
  --color-paper:         #f4f1ea;
  --color-paper-raised:  #fbf9f3;
  --color-border-dark:   #2a332f;
  --color-border-light:  #d8d4c9;

  /* Semantic roles */
  --bg-page:        var(--color-dark);
  --bg-content:     var(--color-paper);
  --bg-card:        var(--color-paper-raised);
  --bg-surface:     var(--color-dark-alt);
  --text-main:      var(--color-dark);
  --text-inverse:   var(--color-paper);
  --text-muted:     var(--color-gray);
  --text-accent:    var(--color-primary-dark);
  --link:           var(--color-primary-dark);
  --link-hover:     var(--color-primary-dark);
  --button-bg:      var(--color-primary-dark);
  --button-bg-hover: var(--color-primary);
  --button-text:    var(--color-paper);
  --button-text-hover: var(--color-dark);
  --nav-text:       var(--color-gray);
  --nav-text-hover: var(--color-primary);
  --divider:        var(--color-border-dark);

  /* Typography */
  --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Source Code Pro', 'SF Mono', Consolas, monospace;

  --fs-xs:   0.75rem;      /* 12px */
  --fs-sm:   0.875rem;     /* 14px */
  --fs-base: 1rem;         /* 16px */
  --fs-md:   1.1rem;       /* ~17.6px */
  --fs-lg:   1.35rem;      /* ~21.6px */
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;

  --lh-tight: 1.25;
  --lh-base:  1.5;
  --lh-loose: 1.8;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  /* Layout */
  --container-max:    1200px;
  --container-narrow: 820px;
  --sidebar-width:    230px;
  --banner-height:    450px;
  --page-header-height: 120px;

  /* Motion */
  --dur: 0.15s;
  --ease: ease;

  /* Radii */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-round: 50%;
}