:root {
  /* ===== PRIMARY — Green (buttons, accents, highlights) ===== */
  --primary:        #22c55e;
  --primary-dark:   #16a34a;
  --primary-light:  #dcfce7;
  --primary-xlight: #f0fdf4;

  /* ===== SECONDARY — Blue (headings, nav, links) ===== */
  --secondary:       #2563eb;
  --secondary-dark:  #1d4ed8;
  --secondary-light: #dbeafe;
  --secondary-xlight:#eff6ff;

  /* ===== BACKGROUNDS ===== */
  --bg-page:      #f8fafc;
  --bg-dark:      #f1f5f9;
  --bg-card:      #ffffff;
  --bg-card-hover:#f0fdf4;
  --bg-nav:       #ffffff;

  /* ===== BORDERS ===== */
  --border:       #e2e8f0;
  --border-focus: #22c55e;

  /* ===== TEXT ===== */
  --text-primary:   #0f172a;
  --text-secondary: #334155;
  --text-muted:     #94a3b8;
  --white:          #ffffff;

  /* ===== STATUS ===== */
  --success:  #22c55e;
  --warning:  #f59e0b;
  --info:     #2563eb;
  --error:    #ef4444;

  /* ===== SHADOWS ===== */
  --shadow-sm:        0 1px 4px rgba(37,99,235,0.08);
  --shadow-md:        0 4px 16px rgba(37,99,235,0.12);
  --shadow-lg:        0 8px 32px rgba(37,99,235,0.15);
  --shadow-primary:   0 4px 20px rgba(34,197,94,0.30);
  --shadow-secondary: 0 4px 20px rgba(37,99,235,0.25);

  /* ===== GRADIENTS ===== */
  --gradient-primary:   linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --gradient-secondary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --gradient-hero:      linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);

  /* ===== TYPOGRAPHY ===== */
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  2rem;
  --font-size-4xl:  2.5rem;
  --font-size-5xl:  3.5rem;

  /* ===== SPACING ===== */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* ===== RADIUS ===== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ===== TRANSITIONS ===== */
  --transition:      all 0.3s ease;
  --transition-fast: all 0.15s ease;

  /* ===== LAYOUT ===== */
  --max-width:  1280px;
  --nav-height: 70px;
}