/**
 * Design tokens — single source of truth for BPA Theme 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);

  /* Site header stack — Pacific prototype (announcement + nav + location banner) */
  --announcement-height: 30px;
  --header-height: 72px;
  --location-banner-height: 72px;
  /* Fixed chrome = nav + location banner (announcement bar scrolls away) */
  --stack-sticky-height: calc(var(--header-height) + var(--location-banner-height));
  /* Full stack height at page top (announcement + nav + banner) */
  --stack-header-height: calc(
    var(--announcement-height) + var(--header-height) + var(--location-banner-height)
  );
  /* Horizontal nav at/above 1200px — iPad Pro (1024px) keeps mobile drawer like Air/Mini */
  --header-nav-desktop-min: 1200px;
  --text-announcement-size: 0.8125rem; /* 13px */
  --text-announcement-leading: 1.538; /* 20px / 13px */
  /* Hero breadcrumb — Figma desktop 18px / 27px leading (mobile keeps announcement size). */
  --text-breadcrumb-size: 1.125rem; /* 18px */
  --text-breadcrumb-leading: 1.5;
  --color-border-subtle: #e3e9e5;
  --color-border-nav: rgb(3 62 64 / 0.3);
  --color-black: #000000;
  --icon-size-sm: 10px;
  --icon-well-sm: 26px; /* Figma accordion trigger icon box (Browse by State) */

  /* acf-locations-browse-by-state-section — Figma 7230:5174 */
  --locations-browse-pad-block: var(--spacing-25);
  --locations-browse-section-gap: var(--spacing-10);
  --locations-browse-accordion-gap: var(--spacing-4);
  --locations-browse-state-min-height: var(--blog-category-pill-height);
  --locations-browse-state-trigger-pad-block: var(--spacing-2);
  --locations-browse-state-trigger-pad-inline: var(--spacing-5);
  --locations-browse-state-trigger-gap: var(--spacing-4);
  --locations-browse-icon-well-size: var(--icon-well-sm);
  --locations-browse-icon-well-pad: var(--spacing-2);
  --locations-browse-icon-well-border: var(--border-width-card) solid var(--color-light);
  --locations-browse-icon-arrow-size: var(--icon-size-sm);
  --locations-browse-panel-pad-block-start: var(--spacing-4);
  --locations-browse-panel-pad-inline: var(--spacing-6);
  --locations-browse-panel-pad-block-end: var(--spacing-6);
  --locations-browse-grid-gap: var(--spacing-8);
  --locations-browse-card-min-height: 228px;
  --locations-browse-card-pad: var(--spacing-6);
  --locations-browse-card-inner-gap: var(--spacing-6);
  --locations-browse-card-content-gap: var(--spacing-4);
  --locations-browse-card-footer-min-height: var(--spacing-10);
  --locations-browse-card-title-size: var(--font-size-xl);
  --locations-browse-card-title-weight: var(--font-weight-bold);
  --locations-browse-card-title-leading: var(--line-height-snug);
  --locations-browse-subheading-max-width: 43.25rem; /* Figma 692px title stack */

  /* Prototype spacing aliases (header / announcement components) */
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-25: 100px;

  /* Hero — fixed stack uses in-flow spacer; section padding only */
  --block-pad-hero-top: var(--block-pad-block);
  --block-pad-hero-bottom: 2.5rem;
  /* Hero stat card label — Figma Title Medium (Roboto 500 / 14.08 / 21.12 / 0.13px) */
  --text-hero-stat-label-size: 0.88rem; /* 14.08px */
  --text-hero-stat-label-leading: 1.5; /* 21.12px */
  --text-hero-stat-label-tracking: 0.008125rem; /* 0.13px */
  /* Hero stat card title — Figma body bold (16px / snug) */
  --text-hero-stat-title-size: 1rem; /* 16px */
  --text-hero-stat-title-leading: 1.4;
  /* Figma Title Large — Roboto Bold 22 / 28 / 0 (media card titles, etc.) */
  --text-title-large-size: 1.375rem; /* 22px — Figma Title Large */
  --text-title-large-leading: 1.75rem; /* 28px */
  --text-title-large-tracking: 0;

  /* Terms pages — clearance under fixed nav + location banner */
  --terms-content-pad-top: var(--stack-sticky-height);

  /* 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 — Pacific Lawns & Sprinklers */
  --color-brand-navy: #1e4d32;
  --color-brand-slate: #1a2e22;
  --color-brand-green: #3d9b40;
  --color-brand-cyan: #0077b6;
  --color-brand-shape: #f4f8f5;
  --color-off-white: #f8f8f8;

  /* Additional brand colors (discovered during CSS audit) */
  --color-brand-mist: #a5bbc4;
  --color-placeholder-bg: #e8ecef;
  --color-icon-border: #dee1e1;
  --color-author-bg: #e8f3ea;
  --color-brand-navy-label: #2d5a3d;
  --color-brand-red: #a60230;
  --color-brand-green-alt: #00bc31;
  /* Local page / franchise greens — grass-divider.svg, local icons (#11733F / #30B454) */
  --color-franchise-green: #11733f;
  --color-franchise-green-bright: #30b454;
  --color-brand-forest: #03400f;
  --color-brand-yellow: #f5d020;
  /* Html-css-components/button — homepage CTAs (primary yellow + secondary white) */
  --color-sunshine-yellow: #ffdc27;
  --color-button-hover: #fff9db;
  --color-deep-teal: #033e40;
  --button-pad-block: 8px;
  --button-pad-inline: 20px;
  --transition-fast: 150ms ease;
  --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;

  /* 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%);

  /* Pacific — Roboto (body/UI) + Source Serif 4 (display headings); Frutiger/Caveat legacy fallbacks. */
  --font-family-base: var(--wp--preset--font-family--roboto, "Roboto", system-ui, sans-serif);
  --font-family-sans: var(--font-family-base);
  --font-family-serif: var(--wp--preset--font-family--source-serif-4, "Source Serif 4", Georgia, 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;
  /* Desktop type scale — Figma final UI: H1 64 / H2 40 / H3 32 / H4–H5 20 / body 16. */
  --font-size-hero-title: 4rem; /* 64px — H1 hero / Figma H1 */
  --font-size-xl: 1.25rem; /* 20px — H4 step */
  --font-size-h5: 1.25rem; /* 20px — Figma H5 / blog card titles, Roboto Bold 140% */
  --font-size-2xl: 2rem; /* 32px — Figma H3 Roboto */
  --font-size-h2-display: 2.5rem; /* 40px — Figma H2 Source Serif / featured split title */
  --font-size-3xl: 2.5rem; /* 40px — H2 (was 48px; Figma wins) */
  --font-size-4xl: 4rem; /* 64px — H1 */

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

  --line-height-tight: 1.2; /* 120% — Figma H2 / serif display titles */
  --line-height-normal: 1.5; /* 150% — Figma body 16px */
  --line-height-relaxed: 1.65;
  --line-height-none: 1;
  --line-height-snug: 1.4; /* 140% — Figma body/card titles */

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

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-card: 8px;
  /* Pacific design system — Html-css-components/css/styles.css */
  --radius-chip: 8px;
  --radius-button: 8px;
  /* Figma Frame 1707478514 — blog category label. */
  --radius-category-pill: 80px;
  --blog-category-pill-height: 44px;
  --blog-category-pill-pad-block: 8px;
  --blog-category-pill-pad-inline: 16px;
  --blog-category-pill-gap: 10px;
  --radius-leaf-sm: 20px 0 20px 0;
  --radius-leaf-lg: 40px 0 40px 0;
  /* Local / service / FAQ cards — Figma 1px #30b454. Prefer border when overflow:hidden. */
  --border-width-card: 1px;
  --border-card: var(--border-width-card) solid var(--color-franchise-green-bright);
  /* Featured blog cards — Figma Layout / 250 / Blog - section (7230:3708): 2px stroke. */
  --border-width-card-accent: 2px;
  --border-card-accent: var(--border-width-card-accent) solid var(--color-franchise-green-bright);
  /* Featured blog card layout — Figma Column: 24px pad/gap, 32px copy→link, 347×211 media. */
  --featured-blog-card-pad: var(--spacing-6);
  --featured-blog-card-gap: var(--spacing-6);
  --featured-blog-card-body-gap: var(--spacing-8);
  --featured-blog-card-copy-gap: var(--spacing-2);
  --featured-blog-card-title-gap: var(--spacing-4);
  --featured-blog-card-media-aspect: 347 / 211;
  --featured-blog-grid-gap: var(--spacing-12);
  /* Alias — was 3px; now matches Figma 1px via --border-card. */
  --outline-local-card: var(--border-card);

  /* Contact / example forms (Html-css-components contact-form) */
  --form-width: 48rem; /* 768px — matches prototype --heading-max */
  --form-field-gutter: var(--spacing-6); /* 24px — prototype exact */
}

/* Location banner — one row below desktop nav (name may wrap beside the button). */
@media (max-width: 1199px) {
  :root {
    --location-banner-height: 72px;
    --stack-sticky-height: calc(var(--header-height) + var(--location-banner-height));
    --stack-header-height: calc(
      var(--announcement-height) + var(--header-height) + var(--location-banner-height)
    );
  }
}

/* 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-h5: 1.25rem; /* 20px — H5 / card titles */
    --font-size-2xl: 24px; /* H3 */
    --font-size-h2-display: 2rem; /* 32px — match H2 mobile */
    --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;

    --block-pad-hero-top: var(--block-pad-block);
    --block-pad-hero-bottom: 2rem;

    --locations-browse-pad-block: var(--block-pad-block);
    --locations-browse-section-gap: var(--block-gap);

    --terms-content-pad-top: var(--stack-sticky-height);
  }
}