/**
 * Global: tokens.css
 * Design tokens and :root CSS variables (brand, type, layout, buttons).
 *
 * Loaded on every marketing front-end request (see inc/assets.php).
 * Pattern-specific CSS stays in assets/css/blocks/.
 */

:root {
  /* Figma brand palette */
  --tidal-wave-blue: #0b4093;
  --tidal-wave-green: #4d9728;
  --tidal-wave-sky: #b6d7fa;
  --tidal-wave-white: #ffffff;

  /* Derived tones */
  --tidal-wave-blue-dark: #072b63;
  --tidal-wave-blue-strong: #09377d;
  --tidal-wave-green-dark: #3d791f;
  --tidal-wave-sky-light: #d4e6fc;
  --tidal-wave-sky-pale: #edf4fe;

  /* RGB channels for translucent overlays */
  --tidal-wave-blue-rgb: 11, 64, 147;
  --tidal-wave-green-rgb: 77, 151, 40;
  --tidal-wave-blue-dark-rgb: 7, 43, 99;
  --tidal-wave-sky-rgb: 182, 215, 250;

  /* Wave palette (derived from Figma sky + blue) */
  --tidal-wave-light: #d4e6fc;
  --tidal-wave-mid: #9dc4f7;
  --tidal-wave-deep: #7ba8e8;
  --tidal-wave-pale: #d9e8fd;

  /* Typography */
  --tidal-wave-eyebrow-size: 0.75rem;
  --tidal-wave-eyebrow-tracking: 0.08em;
  --tidal-wave-eyebrow-gap: var(--wp--preset--spacing--sm);
  --tidal-wave-eyebrow-olive: var(--tidal-wave-green);
  --tidal-wave-body-size: 0.875rem;
  --tidal-wave-section-title-size: clamp(1.5rem, 2.2vw, 1.6875rem);
  /* Title → supporting intro/lede (tighter than --tidal-wave-block-gap) */
  --tidal-wave-title-support-gap: var(--wp--preset--spacing--2xs);

  /* Surfaces */
  --tidal-wave-media-placeholder: #d9d9d9;
  --tidal-wave-media-placeholder-border: rgba(var(--tidal-wave-blue-rgb), 0.2);
  --tidal-wave-media-radius: 14px;
  --tidal-wave-cta-rect-radius: 3px;

  /* Wave edge sizing */
  --tidal-wave-edge-height: clamp(40px, 6.5vw, 60px);
  --tidal-wave-edge-height-mobile: clamp(32px, 10vw, 56px);

  /*
   * Section layout contract
   * - shells / alignfull sections stay edge-to-edge
   * - panels and template parts inset with --tidal-wave-gutter-inline
   * - stacked mobile copy soft-caps with --tidal-wave-measure-sm but must
   *   always be allowed to shrink via min(100%, …) so side gutters remain
   */
  --tidal-wave-gutter-inline: clamp(1.25rem, 5vw, 1.5rem);
  --tidal-wave-measure-sm: 20rem;
  --tidal-wave-section-padding: clamp(2.5rem, 6vw, 4rem);
  --tidal-wave-section-padding-compact: clamp(1.75rem, 4vw, 2.75rem);
  --tidal-wave-block-gap: clamp(0.75rem, 2vw, 1.5rem);
  --tidal-wave-hero-headline: clamp(2rem, 4.8vw, 3.75rem);
  /* Inner-page heroes (FAQ / Contact / HIW / booking) cluster width */
  --tidal-wave-page-hero-content-max: 56rem;
  /* Compact header (circle logo + hamburger) at ≤780px; full nav above that. */
  --tidal-wave-nav-overlay-breakpoint: 780px;

  /* Buttons — mirror theme.json custom.button */
  --tidal-wave-btn-font-size: var(--wp--custom--button--font-size, 0.875rem);
  --tidal-wave-btn-padding-y: var(--wp--custom--button--padding-y, 0.9rem);
  --tidal-wave-btn-padding-x: var(--wp--custom--button--padding-x, 1.4rem);
  --tidal-wave-btn-min-height: var(--wp--custom--button--min-height, 3rem);
  --tidal-wave-btn-letter-spacing: var(--wp--custom--button--letter-spacing, 0.04em);
  --tidal-wave-btn-shadow: var(--wp--custom--button--shadow, 0 12px 24px rgba(77, 151, 40, 0.22));
  --tidal-wave-btn-radius-pill: var(--wp--custom--radius--pill, 999px);
  --tidal-wave-btn-radius-rect: var(--tidal-wave-cta-rect-radius);
}