/* ==========================================================================
   Hampton WDE — design tokens as CSS custom properties
   REPLACED 2026-07-21 from uploads/design-system.html ("WDE Design System",
   Pencil spec) — supersedes the 2026-07-14 live-site extraction.
   Layers: --wde-* primitives -> --wde-sem-* semantic -> --wde-c-* component.
   ========================================================================== */

:root {
  /* ---- Primitive · color · brand ------------------------------------------ */
  --wde-brand-primary: #002F6C;        /* nav CTA, buttons, links */
  --wde-brand-primary-dark: #001F4D;   /* utility bar, footer, dark bands */
  --wde-brand-primary-light: #1A4F9C;  /* hover / secondary emphasis */
  --wde-brand-accent: #C8A951;         /* gold — eyebrow dots, utility links */
  --wde-brand-accent-text: #8F6E1F;    /* gold at text sizes (AA on white/cream) */

  /* ---- Primitive · color · text -------------------------------------------- */
  --wde-text-primary: #0B1B35;
  --wde-text-secondary: #475569;
  --wde-text-muted: #6B7280;
  --wde-text-inverse: #FFFFFF;

  /* ---- Primitive · color · surface & border -------------------------------- */
  --wde-surface-white: #FFFFFF;
  --wde-surface-cream: #FAF8F4;        /* warm page/hero surface */
  --wde-surface-gray-50: #F5F6F8;
  --wde-surface-gray-100: #ECEEF2;
  --wde-surface-gray-200: #D9DDE4;
  --wde-border-subtle: #E5E8EE;

  /* ---- Primitive · color · status ------------------------------------------ */
  --wde-status-available: #0F8A5F;
  --wde-status-available-bg: #E6F4EE;
  --wde-status-limited: #B45309;
  --wde-status-limited-bg: #FEF3C7;
  --wde-status-booked: #B91C1C;
  --wde-status-booked-bg: #FEE2E2;
  --wde-status-maintenance: #475569;
  --wde-status-maintenance-bg: #E5E8EE;

  /* ---- Primitive · font ------------------------------------------------------
     Google Fonts: Newsreader (opsz,wght 400/500/600), Inter (400–800),
     IBM Plex Mono (400/600/700) */
  --wde-font-heading: "Newsreader", Georgia, serif;    /* headings, display, card titles */
  --wde-font-body: "Inter", system-ui, sans-serif;     /* body copy, navigation, labels */
  --wde-font-mono: "IBM Plex Mono", monospace;         /* eyebrows, spec labels, step numbers */

  /* Type styles (from spec sheet) */
  --wde-type-display: 600 48px/1.15 var(--wde-font-heading);
  --wde-type-heading: 600 36px/1.2 var(--wde-font-heading);
  --wde-type-card-title: 600 22px/1.25 var(--wde-font-heading);
  --wde-type-nav-link: 500 14px/1.4 var(--wde-font-body);
  --wde-type-body: 400 14px/1.5 var(--wde-font-body);
  --wde-type-field-label: 600 12px/1.4 var(--wde-font-body);
  --wde-type-eyebrow: 700 11px/1.3 var(--wde-font-mono);  /* +1.2px letter-spacing, uppercase */
  --wde-tracking-eyebrow: 1.2px;

  /* ---- Primitive · dimension ------------------------------------------------ */
  --wde-radius-sm: 6px;      /* thumbnails, logo frames, small chips */
  --wde-radius-md: 10px;     /* buttons, inputs */
  --wde-radius-lg: 16px;     /* cards, framed media */
  --wde-radius-xl: 24px;     /* feature panels */
  --wde-radius-pill: 100px;  /* eyebrow pills, status chips */
  --wde-page-max: 1440px;
  --wde-section-padding: 96px 48px;

  /* ---- Primitive · shadow ---------------------------------------------------- */
  --wde-shadow-card: 0 1px 2px rgba(11, 27, 53, 0.06), 0 4px 16px rgba(11, 27, 53, 0.06);
  --wde-shadow-lift: 0 2px 4px rgba(11, 27, 53, 0.08), 0 12px 28px rgba(11, 27, 53, 0.12);

  /* ---- Semantic --------------------------------------------------------------- */
  --wde-sem-color-primary: var(--wde-brand-primary);
  --wde-sem-color-primary-deep: var(--wde-brand-primary-dark);
  --wde-sem-color-accent: var(--wde-brand-accent);
  --wde-sem-color-text: var(--wde-text-primary);
  --wde-sem-color-text-body: var(--wde-text-secondary);
  --wde-sem-color-text-muted: var(--wde-text-muted);
  --wde-sem-color-text-inverse: var(--wde-text-inverse);
  --wde-sem-color-link: var(--wde-brand-primary);
  --wde-sem-color-surface: var(--wde-surface-white);
  --wde-sem-color-surface-warm: var(--wde-surface-cream);
  --wde-sem-color-surface-tint: var(--wde-surface-gray-50);
  --wde-sem-color-surface-dark: var(--wde-brand-primary-dark);
  --wde-sem-color-border-hairline: var(--wde-border-subtle);

  /* ---- Component ---------------------------------------------------------------- */
  --wde-c-button-primary-bg: var(--wde-brand-primary);
  --wde-c-button-primary-text: var(--wde-text-inverse);
  --wde-c-button-secondary-bg: var(--wde-surface-white);
  --wde-c-button-secondary-text: var(--wde-brand-primary);
  --wde-c-button-secondary-border: 1px solid var(--wde-border-subtle);
  --wde-c-button-radius: var(--wde-radius-md);

  --wde-c-card-radius: var(--wde-radius-lg);
  --wde-c-card-border: 1px solid var(--wde-border-subtle);
  --wde-c-card-shadow: var(--wde-shadow-card);
  --wde-c-card-shadow-hover: var(--wde-shadow-lift);

  --wde-c-input-bg: var(--wde-surface-white);
  --wde-c-input-border: 1px solid var(--wde-border-subtle);
  --wde-c-input-radius: var(--wde-radius-md);

  --wde-c-utility-bar-bg: var(--wde-brand-primary-dark);
  --wde-c-nav-bar-bg: var(--wde-surface-white);
  --wde-c-nav-link-color: var(--wde-text-secondary);
  --wde-c-nav-link-active: var(--wde-text-primary);

  --wde-c-eyebrow-pill-bg: var(--wde-surface-white);
  --wde-c-eyebrow-pill-border: 1px solid var(--wde-border-subtle);
  --wde-c-eyebrow-dot: var(--wde-brand-accent);

  /* ---- Site extension · location families (approved 2026-07; not in Pencil spec) --
     5-token shape per location: core / text / tint / line / solid-fg */
  --wde-loc-1100-core: #004aad; --wde-loc-1100-text: #004aad; --wde-loc-1100-tint: #e4edf9; --wde-loc-1100-line: #99b7de; --wde-loc-1100-solid-fg: #ffffff;
  --wde-loc-1002-core: #02275a; --wde-loc-1002-text: #02275a; --wde-loc-1002-tint: #e6ebf2; --wde-loc-1002-line: #93a5c0; --wde-loc-1002-solid-fg: #ffffff;
  --wde-loc-1400-core: #b08a32; --wde-loc-1400-text: #7f611a; --wde-loc-1400-tint: #f7f0dd; --wde-loc-1400-line: #dcc78f; --wde-loc-1400-solid-fg: #0B1B35;
  --wde-loc-bf-core: #175239;   --wde-loc-bf-text: #175239;   --wde-loc-bf-tint: #e2eee7;   --wde-loc-bf-line: #96bfa7;   --wde-loc-bf-solid-fg: #ffffff;
}