/* ==========================================================================
   main.css — CSS foundation: custom properties, reset, typography, layout
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  /* --- Color Palette --- */

  /* Primary — Forest Green (dedaunan/hutan) */
  --color-primary:        #2D6A4F;
  --color-primary-light:  #52B788;
  --color-primary-dark:   #1B4332;

  /* Secondary — Teal Blue (air/waduk) */
  --color-secondary:      #2196A3;
  --color-secondary-light:#4DB6C4;
  --color-secondary-dark: #156470;

  /* Accent — Warm Brown (tanah/kayu) */
  --color-accent:         #8B5E3C;
  --color-accent-light:   #C4875A;
  --color-accent-dark:    #5C3D22;

  /* Neutral */
  --color-white:          #FFFFFF;
  --color-light:          #F8F9F4;
  --color-gray-100:       #F0F4F0;
  --color-gray-400:       #9CAA9C;
  --color-gray-600:       #5C6B5C;
  --color-dark:           #1A2B1A;
  --color-text:           #2C3E2C;

  /* WhatsApp brand */
  --color-whatsapp:       #25D366;
  --color-whatsapp-dark:  #128C7E;

  /* --- Typography --- */
  --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px — minimum body size */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */

  /* --- Spacing scale --- */
  --spacing-1:  0.25rem;   /*  4px */
  --spacing-2:  0.5rem;    /*  8px */
  --spacing-3:  0.75rem;   /* 12px */
  --spacing-4:  1rem;      /* 16px */
  --spacing-5:  1.25rem;   /* 20px */
  --spacing-6:  1.5rem;    /* 24px */
  --spacing-8:  2rem;      /* 32px */
  --spacing-10: 2.5rem;    /* 40px */
  --spacing-12: 3rem;      /* 48px */
  --spacing-16: 4rem;      /* 64px */
  --spacing-20: 5rem;      /* 80px */
}

/* --------------------------------------------------------------------------
   2. Box-sizing reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   3. Base / Body
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base); /* minimum 16px */
  color: var(--color-text);
  line-height: 1.6;
  background-color: var(--color-light);
}

/* --------------------------------------------------------------------------
   4. Headings
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-dark);
}

/* --------------------------------------------------------------------------
   5. Links
   -------------------------------------------------------------------------- */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   6. Images
   -------------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   7. .container utility
   -------------------------------------------------------------------------- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-4); /* 16px on mobile */
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--spacing-8); /* 32px on wider screens */
  }
}

/* --------------------------------------------------------------------------
   8. Responsive Breakpoints
   Breakpoints defined here mirror the project's design tokens.
   All component-level and page-level rules should compose with these
   rather than introduce ad-hoc values.
   -------------------------------------------------------------------------- */

/* --- 480px — large mobile / small phone landscape --- */
@media (min-width: 480px) {
  :root {
    --text-base: 1rem; /* unchanged — 16px minimum is already set */
  }
}

/* --- 640px — small tablet / phone landscape --- */
/* (grid column switches happen in components.css .grid-3) */
@media (min-width: 640px) {
  .container {
    padding: 0 var(--spacing-6); /* 24px */
  }
}

/* --- 768px — tablet portrait (also hamburger-menu threshold) --- */
/* .container padding override already exists above; kept consistent */
@media (min-width: 768px) {
  /* Rule already present above for .container — no duplicate needed */

  h1 { font-size: var(--text-4xl); }  /* 36px */
  h2 { font-size: var(--text-3xl); }  /* 30px */
  h3 { font-size: var(--text-2xl); }  /* 24px */
}

/* --- 1024px — tablet landscape / small desktop --- */
@media (min-width: 1024px) {
  .container {
    padding: 0 var(--spacing-8); /* 32px */
  }
}

/* --- 1280px — desktop --- */
@media (min-width: 1280px) {
  .container {
    padding: 0 var(--spacing-10); /* 40px */
  }
}

/* --- 1920px — wide / full-HD screens --- */
@media (min-width: 1920px) {
  .container {
    max-width: 1440px; /* wider cap on very large screens */
    padding: 0 var(--spacing-12); /* 48px */
  }
}