/**
 * Design System — CSS Custom Properties
 * Single source of truth for all design tokens.
 *
 * ASSUMPTION NOTICE:
 * Exact values were estimated from static Figma screenshots (no live
 * Figma MCP / Dev Mode connection was available during generation).
 * Every token lives here so the whole theme can be recalibrated by
 * editing this one file once exact Figma values are confirmed.
 * See readme.md → "Assumptions" for the full list.
 */

:root {
  /* ===== BRAND COLORS ===== */
  --color-brand-green-900: #0e2a1b; /* primary dark green — header, footer, dark sections */
  --color-brand-green-800: #14351f; /* card / panel background on dark sections */
  --color-brand-green-700: #1c4429; /* borders, dividers, hover fills on dark bg */
  --color-brand-green-600: #275935; /* lighter accent green, hover states */

  --color-brand-gold-500: #f7c600; /* primary accent — CTA buttons, active nav, icons */
  --color-brand-gold-600: #dcae00; /* gold hover / pressed state */
  --color-brand-gold-100: #fdf3cc; /* faint gold tint, focus rings on dark bg */

  /* ===== NEUTRAL COLORS ===== */
  --color-white: #ffffff;
  --color-neutral-50: #f8f9f7;
  --color-neutral-100: #eef0ec;
  --color-neutral-200: #dfe3db;
  --color-neutral-400: #9aa39a;
  --color-neutral-600: #595f59;
  --color-neutral-800: #2b2f2b;
  --color-neutral-900: #1a1c1a;
  --color-black: #000000;

  /* ===== SEMANTIC / TEXT COLORS ===== */
  --color-text-body: var(--color-neutral-600);
  --color-text-heading: var(--color-neutral-900);
  --color-text-on-dark: var(--color-white);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.75);
  --color-text-link: var(--color-brand-green-900);
  --color-text-link-hover: var(--color-brand-gold-600);

  --color-surface-light: var(--color-white);
  --color-surface-alt: var(--color-neutral-50);
  --color-surface-dark: var(--color-brand-green-900);
  --color-surface-dark-alt: var(--color-brand-green-800);

  --color-border-light: var(--color-neutral-200);
  --color-border-dark: var(--color-brand-green-700);

  --color-focus-ring: var(--color-brand-gold-500);
  --color-success: #2e7d4f;
  --color-error: #c23b3b;

  /* ===== TYPOGRAPHY ===== */
  --font-family-heading: "Saans", "Segoe UI", Arial, sans-serif;
  --font-family-body: "Saans", "Segoe UI", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Fluid type scale: clamp(min, preferred, max) */
  --text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.7rem + 0.85vw, 2.375rem);
  --text-4xl: clamp(2.25rem, 1.95rem + 1.3vw, 3rem);
  --text-5xl: clamp(2.75rem, 2.3rem + 1.9vw, 3.75rem);

  /* ===== SPACING SCALE (4px base unit) ===== */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-32: 8rem; /* 128px */

  /* ===== CONTAINER WIDTHS ===== */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  --container-padding-inline: var(--space-6);

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px rgba(14, 42, 27, 0.08);
  --shadow-md: 0 4px 12px rgba(14, 42, 27, 0.12);
  --shadow-lg: 0 12px 32px rgba(14, 42, 27, 0.16);
  --shadow-focus: 0 0 0 3px var(--color-brand-gold-100);

  /* ===== Z-INDEX SCALE ===== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky-header: 200;
  --z-overlay: 300;
  --z-off-canvas: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== BREAKPOINTS (reference only — CSS custom properties cannot
     be used inside @media queries, so these values MUST be kept in
     sync manually with the hardcoded numbers used in media queries
     across assets/css/*.css and with the JS_BREAKPOINTS map in
     assets/js/sticky-header.js / mobile-menu.js).
     Aligned to Astra parent theme's own tablet breakpoint (921px) to
     avoid the child and parent menus flipping at different widths. ===== */
  --bp-mobile: 599px;
  --bp-tablet: 921px;
  --bp-desktop: 1280px;

  /* ===== HEADER ===== */
  --header-height: 72px;
  --header-height-mobile: 64px;
}