/* SNBG Design Tokens — refined palette, spacing, typography & motion */
:root {
  /* === Brand greens === */
  --green-50:  #eef7f0;
  --green-100: #d8edd9;
  --green-200: #a8d4ac;
  --green-300: #7eb886;
  --green-400: #4f9a5a;
  --green-500: #2B5D31;        /* primary */
  --green-600: #225028;
  --green-700: #1a3f1f;
  --green-800: #133018;
  --green-900: #0c2010;

  --primary-green:   var(--green-500);
  --secondary-green: var(--green-400);
  --light-green:     var(--green-200);
  --accent-green:    var(--green-400);
  --primary-dark:    var(--green-700);

  /* === Brand gold === */
  --gold-50:  #fff9e0;
  --gold-100: #fff1b3;
  --gold-200: #ffe680;
  --gold-300: #ffd84d;
  --gold-400: #FFD700;         /* primary */
  --gold-500: #ffc107;
  --gold-600: #d4a005;
  --gold-700: #a07900;

  --primary-yellow:   var(--gold-400);
  --secondary-yellow: var(--gold-500);
  --light-yellow:     var(--gold-100);
  --accent:           var(--gold-400);
  --accent-light:     var(--gold-100);
  --text-on-yellow:   var(--green-700);

  /* === Earth tones === */
  --earth-brown: #8B5A2B;
  --light-brown: #d2b48c;
  --cream:       #f8f4ea;

  /* === Surfaces === */
  --white: #ffffff;
  --bg:        #fbfbf7;
  --bg-soft:   #f4f6f1;
  --bg-muted:  #ecefe7;

  /* === Greys === */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-inverse:   var(--white);

  /* === Semantic colors === */
  --success: #16a34a;
  --warning: #f59e0b;
  --danger:  #dc2626;
  --info:    #0ea5e9;

  /* === Typography === */
  --font-heading: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.875rem;    /* 14 */
  --fs-base: 1rem;        /* 16 */
  --fs-md:   1.125rem;    /* 18 */
  --fs-lg:   1.25rem;     /* 20 */
  --fs-xl:   1.5rem;      /* 24 */
  --fs-2xl:  1.875rem;    /* 30 */
  --fs-3xl:  2.25rem;     /* 36 */
  --fs-4xl:  3rem;        /* 48 */
  --fs-5xl:  3.75rem;     /* 60 */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* === Spacing === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* === Radii === */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;

  /* === Shadows (layered, subtle) === */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:    0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12), 0 6px 12px rgba(15, 23, 42, 0.06);
  --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.16), 0 10px 20px rgba(15, 23, 42, 0.08);
  --shadow-inner: inset 0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-green: 0 8px 22px rgba(43, 93, 49, 0.18);
  --shadow-gold:  0 8px 22px rgba(255, 215, 0, 0.32);

  /* === Motion === */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration:        220ms;
  --duration-slow:   400ms;

  /* === Layout === */
  --container-max: 1200px;
  --container-pad: 1.25rem;

  /* === Z-index === */
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;

  /* === Gradients === */
  --gradient-forest:    linear-gradient(135deg, #0f3b24 0%, #2B5D31 60%, #4f9a5a 100%);
  --gradient-leaf:      linear-gradient(135deg, #2B5D31 0%, #4f9a5a 100%);
  --gradient-gold:      linear-gradient(135deg, #FFD700 0%, #ffc107 100%);
  --gradient-soft:      linear-gradient(180deg, #fbfbf7 0%, #ecefe7 100%);
  --gradient-overlay:   linear-gradient(135deg, rgba(15,59,36,0.85) 0%, rgba(43,93,49,0.65) 100%);
}

/* Dark mode (optional, future-proof) */
@media (prefers-color-scheme: dark) {
  /* No active dark theme yet — keep whitespace for future override */
}