/* ==========================================================================
   Design Tokens — Argyll Holidays 2026
   Single source of truth for semantic design intent. Values mirror the
   canonical Figma design system and the presets exposed by theme.json.

   theme.json is the machine-readable surface that WP uses for the editor
   and preset CSS vars (--wp--preset--*, --wp--custom--*). This file
   re-exposes the same values under human-readable --color-*, --font-*,
   --spacing-* etc. aliases, so patterns/templates can author against
   semantic names without memorising WP's preset-var convention.

   When values change: update theme.json first (source of truth for WP),
   then mirror here. Never diverge.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     Colour
     -------------------------------------------------------------------------- */

  /* Surfaces */
   --color-surface-base:    var(--wp--preset--color--base); /* Primary page/component background; text on dark surfaces */
   --color-surface-header:  var(--wp--preset--color--header-surface); /* Primary navigation bar background */
   --color-surface-inverse: var(--wp--preset--color--inverse); /* Inverse/dark section background (footer) */
   --color-surface-warm:    var(--wp--preset--color--accent); /* Secondary accent surface; megamenu hover states */
   --color-surface-subtle:  var(--wp--preset--color--muted); /* Muted warm background; tertiary surface */
   --color-surface-brown:   var(--wp--preset--color--brown); /* Rich editorial section background */

  /* Content */
   --color-text-primary:    var(--wp--preset--color--contrast); /* Body copy and nav text on light backgrounds */
   --color-neutral-black:   var(--wp--preset--color--neutral); /* Deep near-black; reserved for high-contrast marks */

  /* Brand */
   --color-brand-accent:    var(--wp--preset--color--secondary); /* Brand highlight; logo secondary mark; decorative accents */

  /* Actions */
   --color-action-primary:  var(--wp--preset--color--primary); /* Primary CTA button background; interactive foreground */

  /* --------------------------------------------------------------------------
     Typography — family
     Custom families are registered via theme.json `fontFace`; keep these
     aliases in sync with the presets there.
     -------------------------------------------------------------------------- */

   --font-family-display: var(--wp--preset--font-family--display); /* Headings, navigation, CTAs */
   --font-family-body:    var(--wp--preset--font-family--body); /* Body copy, footer links, captions */

  /* --------------------------------------------------------------------------
     Typography — weight
     -------------------------------------------------------------------------- */

   --font-weight-display-regular:  var(--wp--custom--font-weight--display-regular);
   --font-weight-display-medium:   var(--wp--custom--font-weight--display-medium);
   --font-weight-body-regular:     var(--wp--custom--font-weight--body-regular);
   --font-weight-body-semibold:    var(--wp--custom--font-weight--body-semibold);

  /* --------------------------------------------------------------------------
     Typography — fluid sizes
     clamp(min, preferred, max) | viewport range 402px → 1920px (Figma frames)
     Each preset and custom token interpolates linearly between the mobile and
     desktop Figma values across that range, then clamps outside it.
     -------------------------------------------------------------------------- */

   --font-size-heading: var(--wp--preset--font-size--heading); /* Card / footer heading (Figma: 24 mobile → 32 desktop) */
   --font-size-nav:     var(--wp--preset--font-size--nav); /* Body, nav, link, button (Figma: 18 mobile → 24 desktop) */
   --font-size-caption: var(--wp--preset--font-size--caption); /* Caption / micro (Figma: 14 mobile → 16 desktop) */
   --font-size-banner:  var(--wp--preset--font-size--banner); /* Announcement bar (Figma: 18px, fixed) */
   --font-size-hero-title:    var(--wp--custom--typography--hero-title); /* Hero H1 (Figma: 42 → 80) */
   --font-size-home-title:    var(--wp--custom--typography--home-title); /* Home hero H1 (Figma: 42 → 80) */
   --line-height-home-title:  var(--wp--custom--typography--home-title-line-height); /* Hero line-height (Figma: 44 → 90) */
   --font-size-archive-title: var(--wp--custom--typography--archive-title); /* Archive H1 (Figma: 32 → 56) */
   --font-size-section-title: var(--wp--custom--typography--section-title); /* Section title (Figma: 32 → 48) */
   --font-size-card-title:    var(--wp--custom--typography--card-title); /* Card title (Figma: 24 → 32) */
   --font-size-body-large:    var(--wp--custom--typography--body-large); /* Body large (Figma: 20 → 32) */

  /* --------------------------------------------------------------------------
     Spacing
     -------------------------------------------------------------------------- */

   --spacing-page-gutter:         var(--wp--custom--spacing--page-gutter); /* Standard horizontal page inset */
   --spacing-page-gutter-compact: var(--wp--custom--spacing--page-gutter-compact); /* Compact horizontal page inset */
   --spacing-header-inset-top:    var(--wp--custom--spacing--header-inset-top); /* Header top padding before logo */
   --spacing-nav-item-gap:        var(--wp--custom--spacing--nav-item-gap); /* Gap between primary navigation links */
   --spacing-footer-inset-v:      var(--wp--custom--spacing--footer-inset-v); /* Footer vertical padding */
   --spacing-footer-section-gap:  var(--wp--custom--spacing--footer-section-gap); /* Gap between footer content rows */
   --spacing-footer-column-gap:   var(--wp--custom--spacing--footer-column-gap); /* Gap between footer link columns */
   --spacing-megamenu-item-gap:   var(--wp--custom--spacing--megamenu-item-gap); /* Horizontal gap between megamenu park cards */
   --spacing-megamenu-inset-h:    var(--wp--custom--spacing--megamenu-inset-h); /* Megamenu horizontal content inset */
   --spacing-content-gap:         var(--wp--custom--spacing--content-gap); /* General component-internal gap */
   --spacing-section-inset-v:     var(--wp--custom--spacing--section-inset-v);
   --spacing-section-inset-v-large: var(--wp--custom--spacing--section-inset-v-large);
   --spacing-component-gap:       var(--wp--custom--spacing--component-gap);
   --spacing-component-gap-small: var(--wp--custom--spacing--component-gap-small);
   --spacing-archive-row-gap:     var(--wp--custom--spacing--archive-row-gap);
   --spacing-review-inner-inset-v: var(--wp--custom--spacing--review-inner-inset-v);
   --spacing-review-inner-inset-h: var(--wp--custom--spacing--review-inner-inset-h);
   --spacing-review-header-gap:   var(--wp--custom--spacing--review-header-gap);
   --size-button-height:          var(--wp--custom--size--button-height); /* Primary button height */
   --size-park-section-max:       var(--wp--custom--size--park-section-max);
   --size-park-intro-max:         var(--wp--custom--size--park-intro-max);
   --size-park-copy-max:          var(--wp--custom--size--park-copy-max);
   --size-park-accommodation-card: var(--wp--custom--size--park-accommodation-card);
   --size-park-card-image-ratio:  var(--wp--custom--size--park-card-image-ratio);
   --size-park-map-height:        var(--wp--custom--size--park-map-height);
   --size-park-map-pin:           var(--wp--custom--size--park-map-pin); /* Map pin pill diameter */
   --size-park-map-zoom:          var(--wp--custom--size--park-map-zoom); /* Map zoom button square */
   --size-park-map-card:          var(--wp--custom--size--park-map-card); /* Map info-card width */
   --size-park-map-card-image:    var(--wp--custom--size--park-map-card-image); /* Map info-card image height */
   --size-park-amenity-icon:      var(--wp--custom--size--park-amenity-icon);
   --size-review-image-height:    var(--wp--custom--size--review-image-height);
   --size-review-image-height-compact: var(--wp--custom--size--review-image-height-compact);
   --size-review-image-max-height: var(--wp--custom--size--review-image-max-height);
   --size-review-image-max-height-compact: var(--wp--custom--size--review-image-max-height-compact);
   --spacing-button-inset-h:      var(--wp--custom--spacing--button-inset-h); /* Button horizontal padding */
   --spacing-button-icon-gap:     var(--wp--custom--spacing--button-icon-gap); /* Gap between button label and icon */

  /* --------------------------------------------------------------------------
     Grid
     -------------------------------------------------------------------------- */

   --grid-columns-desktop:  var(--wp--custom--grid--columns-desktop);
   --grid-columns-mobile:   var(--wp--custom--grid--columns-mobile);
   --grid-column-gap:       var(--wp--custom--grid--column-gap);
   --grid-row-gap:          var(--wp--custom--grid--row-gap);
  --grid-margin:           var(--spacing-page-gutter);
  --grid-margin-compact:   var(--spacing-page-gutter-compact);

  /* --------------------------------------------------------------------------
     Breakpoints (reference values — use in media queries directly)
     -------------------------------------------------------------------------- */

   --breakpoint-mobile-max:  var(--wp--custom--breakpoint--mobile-max);
   --breakpoint-desktop-min: var(--wp--custom--breakpoint--desktop-min);

  /* --------------------------------------------------------------------------
     Border radius
     -------------------------------------------------------------------------- */

   --radius-button:  var(--wp--custom--radius--button); /* Interactive button corners */
   --radius-card:    var(--wp--custom--radius--card);
   --radius-image:   var(--wp--custom--radius--image);
   --radius-image-compact: var(--wp--custom--radius--image-compact);
   --radius-overlay: var(--wp--custom--radius--overlay); /* Megamenu / overlay panel bottom corners */
   --radius-pill:    var(--wp--custom--radius--pill);

  /* --------------------------------------------------------------------------
     Shadows
     -------------------------------------------------------------------------- */

   --shadow-card:    var(--wp--custom--shadow--card);
   --shadow-popover: var(--wp--custom--shadow--popover);

}