/* ===========================================
   DESIGN TOKENS - Mufaiirif Farming
   Global spacing, typography, and styling variables
   =========================================== */

:root {
  /* ===========================================
     SPACING SCALE
     =========================================== */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 60px;
  --space-2xl: 80px;

  /* Section Spacing */
  --section-padding: 80px;
  --section-gap: 60px;
  --heading-margin: 3rem;
  --card-padding: 24px;
  --element-gap: 40px;

  /* ===========================================
     TYPOGRAPHY SCALE
     =========================================== */
  --font-hero: 2.4rem;
  --font-section-title: 1.8rem;
  --font-card-title: 1.1rem;
  --font-subtitle: 0.85rem;
  --font-body: 1rem;
  --font-small: 0.95rem;

  /* Line Heights */
  --lh-tight: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.7;

  /* Letter Spacing */
  --ls-tight: 0.3px;
  --ls-normal: 0.5px;
  --ls-wide: 2px;
  --ls-wider: 3px;

  /* ===========================================
     COLORS
     =========================================== */
  --color-primary: #1a4d2e;
  --color-primary-dark: #153d25;
  --color-accent: #c9a227;
  --color-accent-dark: #9a7b1c;
  --color-text: #444444;
  --color-text-light: #555555;
  --color-text-muted: #666666;
  --color-text-subtle: #888888;
  --color-bg-light: #f8f9fa;
  --color-bg-cream: #f5f5f0;
  --color-bg-gradient-start: #fafaf8;
  --color-border: rgba(0, 0, 0, 0.06);
  --color-shadow: rgba(0, 0, 0, 0.08);
  --color-shadow-hover: rgba(0, 0, 0, 0.12);

  /* ===========================================
     TRANSITIONS
     =========================================== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;

  /* ===========================================
     SHADOWS
     =========================================== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 12px 30px rgba(0, 0, 0, 0.12);

  /* ===========================================
     BORDER RADIUS
     =========================================== */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 15px;
  --radius-2xl: 20px;

  /* ===========================================
     TOUCH TARGETS (Accessibility)
     =========================================== */
  --touch-target-min: 44px;
}

/* ===========================================
   RESPONSIVE SCALING - Tablet
   =========================================== */
@media (max-width: 1080px) {
  :root {
    --section-padding: 60px;
    --section-gap: 40px;
    --heading-margin: 2.5rem;
    --font-hero: 2rem;
    --font-section-title: 1.5rem;
  }
}

/* ===========================================
   RESPONSIVE SCALING - Mobile
   =========================================== */
@media (max-width: 768px) {
  :root {
    --section-padding: 50px;
    --section-gap: 30px;
    --heading-margin: 2rem;
    --font-hero: 1.8rem;
    --font-section-title: 1.4rem;
    --card-padding: 20px;
  }
}

/* ===========================================
   RESPONSIVE SCALING - Small Mobile
   =========================================== */
@media (max-width: 576px) {
  :root {
    --section-padding: 40px;
    --section-gap: 25px;
    --heading-margin: 1.5rem;
    --font-hero: 1.6rem;
    --font-section-title: 1.3rem;
    --card-padding: 16px;
  }
}

/* ===========================================
   GLOBAL UTILITY CLASSES
   =========================================== */

/* Standardized Section Padding */
.section-standard {
  padding: var(--section-padding) 0;
}

/* Standardized Typography */
.hero-title-standard {
  font-size: var(--font-hero);
  font-weight: 600;
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-tight);
}

.section-title-standard {
  font-size: var(--font-section-title);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: var(--ls-normal);
  margin-bottom: var(--space-md);
}

.subtitle-standard {
  font-size: var(--font-subtitle);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.body-text-standard {
  font-size: var(--font-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

/* Card Styling */
.card-standard {
  padding: var(--card-padding);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.card-standard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Focus States for Accessibility */
.value-card:focus-visible,
.timeline-item:focus-visible,
.product-card:focus-visible,
.faq-item:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* Touch Target Improvements */
@media (max-width: 1080px) {
  /* Ensure minimum touch targets on mobile */
  .footer .link-list li a,
  .footer .contact-list li a {
    display: inline-block;
    padding: 10px 0;
    min-height: var(--touch-target-min);
    line-height: 24px;
  }

  .footer-social-icons .social-icon {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }

  /* Nav links touch targets */
  .nav-link {
    padding: 12px 16px !important;
    min-height: var(--touch-target-min);
  }
}