/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   Every colour, font, size, spacing value and timing used by the site lives
   here. Component stylesheets reference these tokens; they should never
   contain raw brand values.

   Two layers:
     1. Palette   (--palette-*)  raw colour values. Change a hue here.
     2. Semantic  (--color-*)    what a colour is *for*. Components use these.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. Palette (raw values)
     ------------------------------------------------------------------------ */
  --palette-forest: #17633a;       /* White text 7.3:1 */
  --palette-forest-dark: #0e4727;
  --palette-sage: #3f9a55;
  --palette-sage-deep: #2a7a40;   /* Derived: sage darkened to pass 4.5:1 for small text */
  --palette-mint: #e4f1e7;        /* Pale forest tint for feature backgrounds */
  --palette-ivory: #f7f4ec;
  --palette-white: #ffffff;
  --palette-charcoal: #292c28;
  --palette-stone: #5c6057;
  --palette-mist: #d9dccf;
  --palette-pewter: #80877a;      /* Derived: form-control borders, ≥3:1 on ivory and white */
  --palette-grey: #8f9088;        /* Logo grey. White icons 3.2:1 (non-text only) */
  --palette-rust: #9a3b2e;        /* Derived: validation errors, ≥6:1 on ivory and white */

  /* ------------------------------------------------------------------------
     2. Semantic colours
     ------------------------------------------------------------------------ */
  --color-primary: var(--palette-forest);
  --color-primary-hover: var(--palette-forest-dark);
  --color-accent: var(--palette-sage);          /* Decorative / large text only (3.2:1 on ivory) */
  --color-accent-text: var(--palette-sage-deep); /* Accent for small text, e.g. eyebrow labels */
  --color-accent-inverse: color-mix(in srgb, var(--palette-sage) 55%, var(--palette-ivory)); /* Accent words on green (≥4.5:1 on the banner gradient) */

  --color-bg: var(--palette-ivory);
  --color-surface: var(--palette-white);
  --color-surface-inverse: var(--palette-forest);
  --color-surface-tint: var(--palette-mint);

  --color-text: var(--palette-charcoal);
  --color-text-muted: var(--palette-stone);
  --color-text-inverse: var(--palette-ivory);
  --color-text-inverse-muted: var(--palette-mist);

  --color-border: var(--palette-mist);
  --color-border-strong: var(--palette-pewter);
  --color-neutral: var(--palette-grey);
  --color-neutral-hover: var(--palette-stone);
  --color-error: var(--palette-rust);

  --color-focus: var(--palette-forest);
  --color-focus-inverse: var(--palette-ivory);
  --color-selection: var(--palette-mist);

  --color-overlay: color-mix(in srgb, var(--palette-charcoal) 55%, transparent);
  --color-shadow: color-mix(in srgb, var(--palette-charcoal) 10%, transparent);
  --color-media-placeholder: color-mix(in srgb, var(--palette-mist) 60%, var(--palette-ivory));

  /* Soft hero wash (ivory to mint, faint sage glow) and the stronger sage
     glow placed behind feature photos. Keep text off the glow. */
  --gradient-hero:
    radial-gradient(40% 50% at 5% 100%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%),
    linear-gradient(160deg, var(--color-bg) 10%, var(--color-surface-tint) 60%);
  --gradient-glow: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent);

  /* Page banner overlays. Wide screens: brand green from the left, solid
     behind the text (to 40%), then a smoothstep fade to clear at the right
     edge. Small screens, where the text runs the full width: green rising
     from the bottom, behind the text. Both keep light text at 4.5:1 or more
     even over a white photo. */
  --gradient-banner: linear-gradient(90deg,
    color-mix(in srgb, var(--color-primary-hover) 94%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 86%, transparent) 40%,
    color-mix(in srgb, var(--color-primary) 77%, transparent) 52%,
    color-mix(in srgb, var(--color-primary) 56%, transparent) 64%,
    color-mix(in srgb, var(--color-primary) 30%, transparent) 76%,
    color-mix(in srgb, var(--color-primary) 9%, transparent) 88%,
    transparent 100%);
  --gradient-banner-sm: linear-gradient(0deg,
    color-mix(in srgb, var(--color-primary-hover) 94%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 85%, transparent) 50%,
    color-mix(in srgb, var(--color-primary) 35%, transparent) 100%);

  /* ------------------------------------------------------------------------
     3. Typography
     ------------------------------------------------------------------------ */
  --font-heading: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-heading: 400; /* DM Serif Display ships a single weight */

  /* Fluid type scale: clamp(min, preferred, max). Min ≈ 360px viewport, max ≈ 1400px. */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.975rem + 0.12vw, 1.0625rem);
  --fs-lg: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --fs-h6: var(--fs-base);
  --fs-h5: var(--fs-lg);
  --fs-h4: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.33rem + 0.75vw, 1.875rem);
  --fs-h2: clamp(2rem, 1.7rem + 1.4vw, 2.75rem);
  --fs-h1: clamp(2.5rem, 1.95rem + 2.4vw, 4rem);
  --fs-display: clamp(2.75rem, 1.85rem + 3.9vw, 5.25rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  --ls-heading: -0.01em;
  --ls-button: 0.02em;
  --ls-eyebrow: 0.16em;

  --measure: 65ch;        /* Comfortable reading width */
  --measure-narrow: 48ch; /* Section intros, ledes */

  /* ------------------------------------------------------------------------
     4. Spacing
     ------------------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-space: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --section-space-tight: clamp(3rem, 2.2rem + 3.5vw, 5rem);
  --stack-space: var(--space-5); /* Default gap between stacked blocks */

  /* ------------------------------------------------------------------------
     5. Layout
     ------------------------------------------------------------------------ */
  --container-max: 80rem;      /* 1280px */
  --container-narrow: 47.5rem; /* 760px  */
  --container-wide: 90rem;     /* 1440px */
  --page-gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);
  --banner-height: max(35vh, 16rem); /* Page banner photo area, below the header */

  /* Breakpoints mirror Bootstrap 5. CSS media queries cannot read custom
     properties, so stylesheets repeat these literal values; JavaScript reads
     them from here (see main.js). Keep both in sync if you change them. */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;
  --bp-nav: var(--bp-lg); /* Desktop navigation appears at this width */

  /* ------------------------------------------------------------------------
     6. Shape and depth
     ------------------------------------------------------------------------ */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  /* Arched top for 4:5 photo frames (the 50% / 40% pair makes a true semicircle) */
  --radius-arch: 50% 50% var(--radius-lg) var(--radius-lg) / 40% 40% var(--radius-lg) var(--radius-lg);

  --border-width: 1px;

  --shadow-sm: 0 1px 2px var(--color-shadow);
  --shadow-md: 0 6px 20px -8px var(--color-shadow);
  --shadow-lg: 0 18px 40px -16px var(--color-shadow);
  --shadow-brand: 0 22px 40px -18px color-mix(in srgb, var(--color-primary) 45%, transparent); /* Card hover, feature photos */

  /* ------------------------------------------------------------------------
     7. Buttons and form controls
     ------------------------------------------------------------------------ */
  --btn-height: 3.25rem;
  --btn-height-sm: 2.625rem;
  --btn-padding-x: 1.75rem;
  --btn-padding-x-sm: 1.25rem;
  --btn-radius: var(--radius-xs);
  --btn-font-size: var(--fs-sm);
  --btn-font-weight: var(--fw-semibold);

  --input-height: 3.25rem;
  --input-padding-x: var(--space-4);
  --input-radius: var(--radius-xs);
  --textarea-min-height: 9rem;

  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
  --focus-ring-offset-tight: 1px; /* Form controls */

  /* ------------------------------------------------------------------------
     8. Motion
     ------------------------------------------------------------------------ */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-distance: 1rem;

  /* ------------------------------------------------------------------------
     9. Site chrome
     ------------------------------------------------------------------------ */
  --header-height: 5rem;
  --header-logo-height: 2.185rem;
  /* Liquid-glass header. A 75% white tint keeps nav text at 4.5:1 or more,
     even when the darkest green section scrolls behind it. */
  --header-glass-bg: color-mix(in srgb, var(--color-surface) 75%, transparent);
  --header-glass-edge: color-mix(in srgb, var(--color-surface) 60%, transparent);
  --header-glass-filter: blur(20px) saturate(180%);
  --nav-link-gap: var(--space-6);
  --nav-toggle-icon-size: 1.75rem;

  --footer-padding-y: var(--space-8);
  --footer-logo-height: 3.5rem;

  --fab-size: 3.5rem;
  --fab-icon-size: 1.5rem;
  --fab-gap: var(--space-3);
  --fab-hover-lift: -2px;
  --fab-ring-width: 2px;
  --fab-offset: var(--space-4);
  /* Vertical space the floating stack occupies; reserved at the page bottom so
     it never hides the last line of the footer. */
  --fab-clearance: calc(var(--fab-size) * 2 + var(--fab-gap) + var(--fab-offset) * 2);

  --icon-size: 1.125em;

  --z-fab: 900;
  --z-header: 1000;
  --z-skip-link: 1100;
}

/* Responsive token overrides ------------------------------------------------ */
@media (min-width: 992px) {
  :root {
    --header-height: 6rem;
    --header-logo-height: 2.675rem;
    --fab-offset: var(--space-6);
  }
}