/* ============================
   GLOBAL RESET + BASE RULES
===============================*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: "Inter", Arial, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text-body);
  line-height: 1.6;
  overflow-x: hidden;
}


/* ============================
   DESIGN TOKENS (:root)
===============================*/
:root {
  /* Brand Colors */
  --color-brand-primary: #749417;
  --color-brand-dark: #41500A;
  /* --color-button-hover : #5f7a13 ;  */

  /* Neutral Palette */
  --color-bg: #F8F9F4;
  --color-surface: #FFFFFF;
  --color-surface-muted: #EEF4E2;

  /* Text Colors */
  --color-text-body: #2A2A2A;
  --color-text-muted: #6B6B6B;

  /* Borders */
  --color-border-subtle: #E1E4D8;
  --color-border-strong: #C5CCB2;

  /* Shadows */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* Typography Scale */
  --fs-h1: 2.75rem;
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-body: 1rem;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* Max Content Width */
    --layout-max-width: 1440px;
    --nav-height: 80px;
}


/* ============================
   UTILITY HELPERS
===============================*/

/* ===== GLOBAL ACCESSIBILITY FOCUS OVERRIDES ===== */

a:focus-visible,
button:focus-visible,
.dropdown-item:focus-visible {
  outline: none !important;          /* remove browser outline */
  box-shadow: 0 0 0 2px black !important; /* custom ring */
  border-radius: 4px;
}
/* .section {
  padding: var(--space-xl) 0;
  margin: auto;
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--color-brand-dark);
  margin-bottom: var(--space-md);
}

.max-width {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
} */

/* Buttons */
.btn-brand {
  background-color: var(--color-brand-primary);
  color: #fff !important;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-primary{
  background-color: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #fff !important;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-brand:hover, .btn-brand:focus,.btn-primary:hover, .btn-primary:focus {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: #fff !important;
}

.btn-outline-brand {
  border: 2px solid var(--color-brand-primary);
  color: var(--color-brand-primary) !important;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: 0.3s ease;
}

.btn-outline-brand:hover {
  background-color: var(--color-brand-primary);
  color: #fff !important;
}