/* === DESIGN TOKENS === */
/* Eastern Group of Companies — derived from brand logo (green + gold) */

:root {
  /* Primary – forest green (from logo) */
  --primary: hsl(152, 55%, 22%);
  --primary-light: hsl(152, 45%, 32%);
  --primary-dark: hsl(155, 58%, 14%);
  --primary-darker: hsl(158, 62%, 8%);

  /* Accent – gold/amber (Philippine sun, logo yellow) */
  --accent: hsl(45, 85%, 52%);
  --accent-light: hsl(45, 80%, 65%);
  --accent-dark: hsl(42, 90%, 40%);
  --accent-glow: hsl(48, 90%, 70%);

  /* Green spectrum from logo chevrons */
  --green-bright: hsl(100, 50%, 45%);
  --green-lime: hsl(78, 60%, 52%);

  /* Neutrals – warm tinted */
  --white: #ffffff;
  --off-white: #f9f8f5;
  --grey-100: #f0eeeb;
  --grey-200: #d9d6d0;
  --grey-300: #bfbab2;
  --grey-400: #8a8680;
  --grey-600: #5a5650;
  --grey-800: #2a2825;
  --black: #1a1816;

  /* Semantic colors */
  --text-primary: var(--grey-800);
  --text-secondary: var(--grey-600);
  --text-on-dark: var(--off-white);
  --text-on-dark-muted: rgba(248, 247, 244, 0.65);
  --text-accent: var(--accent);
  --bg-light: var(--off-white);
  --bg-dark: var(--primary-dark);
  --bg-darker: var(--primary-darker);
  --bg-section-alt: var(--grey-100);

  /* === TYPOGRAPHY === */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
  --text-s: clamp(0.8125rem, 0.76rem + 0.2vw, 0.9375rem);
  --text-m: clamp(0.9375rem, 0.87rem + 0.25vw, 1.0625rem);
  --text-l: clamp(1.0625rem, 0.97rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);

  --h6: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
  --h5: clamp(1.125rem, 1rem + 0.4vw, 1.5rem);
  --h4: clamp(1.25rem, 1rem + 0.7vw, 1.75rem);
  --h3: clamp(1.5rem, 1.2rem + 0.9vw, 2.25rem);
  --h2: clamp(1.75rem, 1.3rem + 1.3vw, 2.75rem);
  --h1: clamp(2.5rem, 1.5rem + 2.5vw, 4.25rem);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.14em;

  /* === SPACING (fluid) === */
  --space-2xs: clamp(0.25rem, 0.2rem + 0.15vw, 0.375rem);
  --space-xs: clamp(0.5rem, 0.3rem + 0.5vw, 0.75rem);
  --space-s: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
  --space-m: clamp(1.25rem, 0.8rem + 1.2vw, 2rem);
  --space-l: clamp(2rem, 1.2rem + 2vw, 3rem);
  --space-xl: clamp(3rem, 1.8rem + 3vw, 5rem);
  --space-xxl: clamp(4rem, 2.5rem + 4vw, 7rem);

  --section-space-s: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  --section-space-m: clamp(4rem, 2.5rem + 4vw, 7rem);
  --section-space-l: clamp(5rem, 3rem + 5vw, 9rem);

  /* === LAYOUT === */
  --container-width: 1366px;
  --container-narrow: 900px;
  --grid-gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);

  /* === EFFECTS === */
  --radius-s: 0.375rem;
  --radius-m: 0.625rem;
  --radius-l: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --shadow-s: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-m: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-l: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.08);

  /* === TRANSITIONS === */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* === NAV === */
  --nav-height: clamp(3.5rem, 3rem + 1.5vw, 4.5rem);
}