/**
 * Design tokens — single source of truth for PRISM styling.
 * Change values here; blocks and utilities use var(--*) only.
 * theme.json stays minimal (layout widths + editor constraints only).
 *
 * ACF blocks: use --block-pad-*, --block-gap, --block-content-gap for section spacing
 * (documented in .vscode/acf-tailwind-inspired-css-system.md § ACF block spacing).
 */
:root {
  --container-narrow: 860px;
  --container-terms: 1120px;
  --container-blog: 48rem; /* 768px — single blog post content column */
  --container-wide: 1280px;
  --container-ultrawide: 1440px;
  /* Alias — same as --container-wide; use class .container-main in markup */
  --container-main: var(--container-wide);

  /* Content max-widths (repeated across blocks; CSS audit) */
  --container-narrow-alt: 43.75rem;
  --container-wide-content: 82rem;
  --container-card: 52rem;
  --container-gallery: 69rem;
  --container-split: 49.875rem;
  --container-cta-title: 34.25rem;
  --container-cta-call: 37.5rem;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 3rem; /* 48px — site header nav row gap */

  /* ACF blocks — shared section padding & gaps (interface.pen 80px desktop) */
  --block-pad-inline: 5rem;
  --block-pad-block: 5rem;
  --block-gap: 5rem;
  --block-content-gap: var(--space-md);

  /* Solid-header spacer height (topbar + nav). view.js overwrites this
   * with the measured header.offsetHeight. Overlay pages skip the spacer. */
  --header-offset: 7.25rem;

  /* Overlay hero only — title clearance under the transparent nav.
   * Solid pages use the spacer (--header-offset) + --block-pad-block. */
  --block-pad-hero-top: 12.5rem;
  --block-pad-hero-bottom: 2.5rem;

  /* Testimonial title chevron (desktop only) */
  --block-chevron-tip: 7.75rem;

  --color-light: #ffffff;
  --color-dark: #1f2937;
  --color-muted-text: #374151;
  --color-muted-bg: #f3f4f6;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-border: #e5e7eb;

  /* Brand (Pencil / interface.pen) */
  --color-brand-navy: #1c4965;
  --color-brand-slate: #1b2a34;
  --color-brand-green: #309c1e;
  --color-brand-cyan: #00a0df;
  --color-brand-shape: #f8f9f9;

  /* Additional brand colors (discovered during CSS audit) */
  --color-brand-mist: #a5bbc4;
  --color-placeholder-bg: #e8ecef;
  --color-icon-border: #dee1e1;
  --color-author-bg: #e8f1f5;
  --color-brand-navy-label: #28475a;
  --color-brand-red: #a60230;
  --color-brand-green-alt: #00bc31;
  --color-nav-muted: #d1d5db;
  --color-brand-cyan-soft: color-mix(in srgb, var(--color-brand-cyan) 8%, transparent);

  /* Brand gradient bar — used across 18+ blocks as section divider */
  --gradient-brand: linear-gradient(90deg, #d9d9d9 0%, var(--color-brand-cyan) 27.4%, var(--color-brand-green) 59.6%, #ededed 100%);
  --divider-height: 4px;

  /* Cyan → slate text fill — SEO intro closing + [gradient: …] heading accent */
  --gradient-text-cyan-slate: linear-gradient(
    90deg,
    var(--color-brand-cyan) 0%,
    var(--color-brand-slate) 100%
  );

  /* Shadows */
  --shadow-card: 0 0.25rem 1.5rem rgba(27, 42, 52, 0.08);
  --shadow-nav: 0 1px 8px rgba(27, 42, 52, 0.08);
  --shadow-submenu: 0 8px 24px rgba(27, 42, 52, 0.16);
  --shadow-location-card: 0 6px 24px rgba(27, 42, 52, 0.18);
  --shadow-knob: 0 2px 12px rgb(27 42 52 / 18%);
  --shadow-card-location: 0 2px 8px rgb(27 42 52 / 6%);
  --shadow-media-ring: 0 0 0 1px rgb(27 42 52 / 12%);

  /* Align with theme.json presets (Frutiger / Caveat); literal names are fallbacks. */
  --font-family-base: var(--wp--preset--font-family--frutiger, "Frutiger", system-ui, sans-serif);
  --font-family-accent: var(--wp--preset--font-family--caveat, "Caveat", cursive);

  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-body-lg: 1.25rem;
  --font-size-hero-title: 3.5rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 24px; /* H3 — fixed px so rem root scaling cannot oversize */
  --font-size-3xl: 3rem;
  --font-size-4xl: 4rem;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --line-height-none: 1;
  --line-height-snug: 1.4;

  --letter-spacing-tight: -0.02em;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-card: 8px;
}

/* Mobile type scale (design guidelines): H1 38 / H2 32 / H3 24 / body 13, bold headings. */
@media (max-width: 768px) {
  :root {
    --space-xl: 3rem;
    --space-2xl: 4rem;

    /* Body — roman 13px; keep sm slightly smaller than base. */
    --font-size-sm: 0.75rem; /* 12px */
    --font-size-base: 0.8125rem; /* 13px */
    --font-size-lg: 0.875rem; /* 14px */
    --font-size-body-lg: 0.875rem; /* 14px */

    /* Headings — bold via .heading-* / reset; sizes map H3→2xl, H2→3xl, H1→4xl. */
    --font-size-xl: 1.25rem; /* 20px — H4 / heading-sm step below H3 */
    --font-size-2xl: 24px; /* H3 */
    --font-size-3xl: 2rem; /* 32px — H2 */
    --font-size-4xl: 2.375rem; /* 38px — H1 */
    --font-size-hero-title: 2.375rem; /* 38px — match H1 mobile */

    --block-pad-inline: 1.5rem;
    --block-pad-block: 2rem;
    --block-gap: 2rem;
    --block-content-gap: 1.25rem;

    --header-offset: 6.5rem;

    --block-pad-hero-top: 6rem;
    --block-pad-hero-bottom: 2rem;
  }
}