:root {
  /* ── Backgrounds ── */
  --color-bg:           #F7F6F2;   /* warm off-white — not sterile, has warmth */
  --color-bg-alt:       #EEECEA;   /* alternate section bg */
  --color-surface:      #FFFFFF;   /* cards / elevated surfaces */
  --color-surface-2:    #F2F1ED;   /* hover surface */

  /* ── Brand green ── */
  --color-accent:       #00A86B;   /* primary green — buttons, badges, decorative */
  --color-accent-dark:  #007844;   /* text on light bg — better contrast */
  --color-accent-deep:  #005330;   /* body-size accent text */
  --color-accent-dim:   rgba(0, 168, 107, 0.10);  /* tinted fills */
  --color-accent-glow:  rgba(0, 168, 107, 0.18);

  /* ── Typography ── */
  --color-text:         #111210;   /* near-black, slight warmth */
  --color-text-muted:   #6B7066;   /* subdued body text */
  --color-text-faint:   #A8AFA8;   /* dividers, placeholders, captions */

  /* ── Glass / surfaces ── */
  --color-glass:        rgba(255, 255, 255, 0.72);
  --color-glass-hover:  rgba(255, 255, 255, 0.92);
  --color-glass-border: rgba(0, 0, 0, 0.08);
  --color-glass-border-hover: rgba(0, 120, 68, 0.36);

  /* ── Fonts ── */
  --font-heading: 'Outfit', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ── Shadows (lighter — light mode) ── */
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:     0 8px 24px rgba(0, 0, 0, 0.09);
  --shadow-lg:     0 24px 56px rgba(0, 0, 0, 0.13);
  --shadow-green:  0 0 32px rgba(0, 168, 107, 0.16);
  --shadow-green-strong: 0 0 64px rgba(0, 168, 107, 0.22);

  /* ── Borders ── */
  --border-subtle:  1px solid rgba(0, 0, 0, 0.08);
  --border-green:   1px solid rgba(0, 0, 0, 0.15);
  --border-green-hover: 1px solid var(--color-accent-dark);

  /* ── Radii ── */
  --radius-sm:  4px;
  --radius-md:  10px;
  --radius-lg:  18px;
  --radius-xl:  28px;

  /* ── Transitions ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-enter:  650ms var(--ease-out-expo);

  /* ── Z-index ── */
  --z-navbar:  100;
}