/* ============================================
   DESIGN TOKENS — Archi Green Design Studio
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --color-primary-green: #22c55e;
  --color-primary-green-hover: #1eae53;
  --color-dark-green: #1a3a2a;
  --color-dark-green-hover: #153123;

  /* ── Neutrals ── */
  --color-white: #ffffff;
  --color-white-85: rgba(255, 255, 255, 0.85);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-12: rgba(255, 255, 255, 0.12);
  --color-black: #0a0a0a;
  --color-black-overlay-heavy: rgba(0, 0, 0, 0.55);
  --color-black-overlay-light: rgba(0, 0, 0, 0.25);

  /* ── Typography ── */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --fs-hero-heading: clamp(3rem, 5.5vw, 4.75rem);  /* 48px → 76px */
  --fs-nav: 0.8125rem;       /* 13px */
  --fs-body: 1.0625rem;      /* 17px */
  --fs-body-sm: 1rem;        /* 16px */
  --fs-btn: 0.8125rem;       /* 13px */
  --fs-btn-nav: 0.8125rem;   /* 13px */

  --lh-heading: 1.05;
  --lh-body: 1.65;

  --ls-uppercase: 0.08em;
  --ls-heading: -0.02em;

  /* ── Spacing ── */
  --space-hero-pad-left: 60px;
  --space-hero-pad-bottom: 80px;
  --space-nav-height: 80px;
  --space-section-gap: 120px;

  /* ── Borders & Radius ── */
  --radius-pill: 999px;
  --radius-sm: 8px;
  --border-btn: 2px solid var(--color-white);

  /* ── Transitions ── */
  --transition-fast: 0.25s ease;
  --transition-base: 0.4s ease;
  --transition-fade: 0.6s ease;
  --transition-slow: 0.8s ease;

  /* ── Z-indices ── */
  --z-navbar: 1000;
  --z-overlay: 1;
  --z-content: 2;
  --z-scroll-dot: 3;
  --z-mobile-menu: 999;
}

@media (max-width: 768px) {
  :root {
    --space-hero-pad-left: 24px;
    --space-hero-pad-bottom: 40px;
    --space-nav-height: 65px;
    --space-section-gap: 60px;
  }
}