/**
 * Wito Projects — Design tokens (source of truth)
 * AUDIT pass 2: linked sitewide; --star-color added; bundles patched with matching vars
 * ---------------------------------------------------------------------------
 * Color, type, spacing, and layout tokens for the site design system.
 * Page bundles already embed a subset of these in their :root blocks.
 * Keep this file authoritative when adding or changing tokens; then mirror
 * into bundles / critical CSS as needed.
 *
 * Load order (served pages):
 *   1. *-critical.css / *-bundle.css  (shell + page composite)
 *   2. page modules / location-landing / locations-nav / deferred
 *   3. wito-tokens.css                (additive semantic tokens, e.g. --star-color)
 *   4. wito-vertical-rhythm.css       (MUST be last — spacing lock)
 * ---------------------------------------------------------------------------
 */
:root {
  /* —— Typography —— */
  --default-font: "Roboto", system-ui, -apple-system, sans-serif;
  --heading-font: "Roboto", sans-serif;
  --nav-font: "Roboto", sans-serif;
  --body-line-height: 1.6;
  --heading-line-height: 1.25;
  --heading-h1-size: clamp(2.2rem, 8vw, 4.2rem);
  --heading-h2-size: clamp(1.75rem, 4vw, 2.25rem);
  --heading-h3-size: clamp(1.4rem, 3vw, 1.65rem);
  --heading-h4-size: 1.25rem;
  --heading-h5-size: 1.1rem;
  --heading-h6-size: 1rem;
  --nav-font-size: 0.85rem;
  --label-font-size: 0.8rem;
  --eyebrow-font-size: 0.72rem;

  /* —— Brand / semantic colors —— */
  --background-color: #ffffff;
  --surface-color: #ffffff;
  --default-color: #3a3a3a;
  --heading-color: #2d1650;
  --accent-color: #aa4400;
  --accent-hover: #8a3600;
  --contrast-color: #ffffff;
  --neutral-color: #f5f5f5;
  --muted-color: #595959;
  --border-color: #e6e6e6;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --header-shrink-bg: #ffffff;
  --nav-mobile-bg: #1a3350;
  --hero-dark-bg: #0f1f35;
  --footer-bg: #0a1628;
  --success-color: #2e7d32;
  --whatsapp-color: #25d366;
  --whatsapp-hover: #1ebe57;
  --whatsapp-text: #0b1c12;
  --map-facade-bg: #e8e3db;
  --accent-soft: rgba(170, 68, 0, 0.08);
  --accent-soft-strong: rgba(170, 68, 0, 0.12);
  --heading-soft: rgba(45, 22, 80, 0.1);
  --dark-surface: #16263d;
  --dark-text-muted: rgba(255, 255, 255, 0.82);
  --dark-accent: #e8a06a;
  /* Star / rating gold (reviews, trust bars) — prefer over raw #d4782a */
  --star-color: #d4782a;

  /* —— Legacy aliases (prefer primary names above) —— */
  --bg-white: var(--background-color);
  --bg-offwhite: #f4f4f4;
  --bg-dark: var(--hero-dark-bg);
  --text-dark: var(--default-color);
  --text-light: #f4f5f7;

  /* —— Spacing scale (4px base) —— */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 2rem;      /* 32px */
  --space-8: 2.5rem;    /* 40px */
  --space-9: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-11: 5rem;     /* 80px */
  --space-12: 6.25rem;  /* 100px */

  /* —— Layout —— */
  --site-max-width: 1440px;
  --content-max-width: 1100px;
  --prose-max-width: 52rem;
  --lead-max-width: 44rem;
  --grid-gap: 1.875rem; /* 30px */
  --section-padding: 5rem; /* was 100px — aligned with common 5rem fallbacks */
  --section-padding-sm: clamp(2.5rem, 5vw, 4.25rem);
  --mobile-gutter: 1.25rem; /* 20px */
  --desktop-gutter: 5%;
  --header-height: 6.25rem;
  --header-padding: 1.5rem;
  --hero-top-clearance: calc(var(--header-height) + 1.25rem);
  --nav-active-underline-width: 68%;
  /* —— Vertical rhythm (heading → accent → lead → content) —— */
  --spacing-xs: var(--space-2);
  --spacing-sm: var(--space-3);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-7);
  --spacing-2xl: var(--space-8);
  --rhythm-heading-to-accent: 0.75rem;
  --rhythm-accent-to-lead: 1.75rem;
  --rhythm-lead-to-content: 1.75rem;
  --rhythm-paragraph: var(--spacing-md);
  --accent-line-width: 60px;
  --accent-line-height: 4px;
  --lead-line-height: 1.65;
  --prose-line-height: 1.75;
  --wito-heading-stack-gap: 0;
  --wito-section-lead-margin-bottom: var(--rhythm-lead-to-content);
  --wito-heading-to-lead-gap: 0; /* accent line owns the gap to the lead */

  /* —— Radii & motion —— */
  --global-radius: 8px;
  --btn-radius: 4px;
  --pill-radius: 999px;
  --transition-base: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-speed: 0.4s;
  --shadow-soft: 0 4px 22px rgba(15, 26, 36, 0.06);
  --shadow-card: 0 8px 32px rgba(15, 26, 36, 0.08);
}

/* Utility surfaces — use tokens, not raw hex */
.bg-white {
  background: var(--bg-white);
  color: var(--text-dark);
}

.bg-offwhite {
  background: var(--bg-offwhite);
  color: var(--text-dark);
}

.bg-dark {
  background: var(--bg-dark);
  color: var(--text-light);
}