/* =====================================================
   BUILT ENVIRONMENT INDABA – CSS VARIABLES
   ===================================================== */
:root {
  /* Brand Colors */
  --green-primary: #2E6B4E;
  --green-dark: #1F4F3A;
  --green-light: #3A8563;
  --gold: #F2B705;
  --gold-light: #F4C42E;
  --gold-dark: #D49D04;
  --red: #E34A35;
  --red-accent: #D6453D;

  /* Base Colors */
  --bg: #F7F9F8;
  --white: #ffffff;
  --text: #1F2933;
  --text-light: #616E7C;
  --muted: #0f0f0f;
  --border: #E3E7E5;
  --border-focus: #2E6B4E;

  /* State Colors */
  --error: #DC2626;
  --error-bg: #FEE2E2;
  --error-border: #FCA5A5;
  --success: #059669;
  --success-bg: #D1FAE5;
  --success-border: #6EE7B7;
  --warning: #D97706;
  --warning-bg: #FEF3C7;
  --info: #0284C7;
  --info-bg: #E0F2FE;

  /* Design Tokens */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow: 0 15px 64px rgba(0, 0, 0, .08);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, .1);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .15);
  --shadow-focus: 0 0 0 3px rgba(46, 107, 78, 0.2);

  /* Uniform Spacing Scale */
  --xs: 0.25rem;   /* 4px */
  --sm: 0.5rem;    /* 8px */
  --md: 1rem;      /* 16px */
  --lg: 1.5rem;    /* 24px */
  --xl: 2rem;      /* 32px */
  --xxl: 3rem;     /* 48px */
  --xxxl: 4rem;    /* 64px */

  /* Transition Durations */
  --transition-fast: 150ms;
  --transition-base: 250ms;
  --transition-slow: 350ms;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-toast: 2000;

  /* Typography */
  --font-base: Inter, system-ui, sans-serif;
  --line-height-tight: 1.25;
  --line-height-base: 1.65;
  --line-height-relaxed: 1.75;

  /* Touch Targets */
  --touch-target: 48px;
  --touch-target-sm: 40px;
}