/* WP: replace href base with <?php echo get_template_directory_uri(); ?>/assets/css/variables.css */
:root {
  /* Industrial green palette */
  --color-primary: #1a5c3a;
  --color-primary-hover: #144a2f;
  --color-primary-soft: #e8f2ec;
  --color-primary-rgb: 26, 92, 58;
  --color-accent: #2d8f5a;
  --color-surface: #ffffff;
  --color-surface-muted: #f4f7f5;
  --color-text: #1a1f1c;
  --color-text-muted: #5c6560;
  --color-border: #d5e0d9;
  --color-overlay: rgba(12, 22, 16, 0.55);

  --font-heading: "Montserrat", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: clamp(2rem, 4vw, 3rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  --shadow-sm: 0 1px 2px rgba(12, 22, 16, 0.06);
  --shadow-md: 0 8px 24px rgba(12, 22, 16, 0.1);
  --shadow-lg: 0 20px 50px rgba(12, 22, 16, 0.12);

  --container-max: 1600px;
  --pad-x: 3vw;
  --pad-x-mobile: 5vw;
  --touch-min: 2.75rem; /* 44px */

  --topbar-h: 2.5rem;
  --header-h: 4.25rem;
  --header-total-h: calc(var(--topbar-h) + var(--header-h));
  --z-drawer: 1200;
  --z-search: 1150;
  --z-modal: 1300;
  --z-header: 1100;

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}

@media (max-width: 47.99em) {
  :root {
    --pad-x: var(--pad-x-mobile);
  }
}