/* ==========================================================================
   ZedHome — Design Tokens
   Palette sampled from assets/img/logo.png (roof-and-checkmark mark).
   ========================================================================== */

:root {
  /* Brand
     The orange itself is the identity and does not change. What changed is
     what sits on/around it, because white on #E97A1A is only 2.9:1 (fails
     WCAG AA):
       --color-on-brand   text/icons on an orange fill  -> 5.9:1
       --color-brand-dark orange TEXT on light surfaces -> 5.7:1 on white
       --color-brand-hover  filled-button hover/pressed -> 5.0:1 with on-brand
     Flip --color-on-brand to #fff (and darken --color-brand) if a white-text
     look is ever preferred; every filled-orange component reads this token. */
  --color-brand: #E97A1A;
  --color-brand-dark: #A3500A;
  --color-brand-hover: #D96D0F;
  --color-brand-light: #FBEAD8;
  --color-brand-50: #FFF4EA;
  --color-on-brand: #1E1B1A;

  /* Ink / charcoal */
  --color-ink: #1E1B1A;
  --color-ink-soft: #322D2A;
  --color-ink-70: rgba(30, 27, 26, 0.7);

  /* Paper / neutrals */
  --color-paper: #FBF9F6;
  --color-surface: #FFFFFF;
  --color-text: #57534E;
  /* #857F78 measured ~3.96:1 on white at small sizes -- below WCAG AA's
     4.5:1 floor for normal text. Darkened to the same warm-gray hue
     family at ~5.1:1, checked against every context that uses this token
     (all light surfaces -- search overlay, hero search card, card meta
     text; the dark footer has its own separate color scheme). */
  --color-text-soft: #726D66;
  --color-border: #E8E3DC;
  --color-border-strong: #D8D1C6;

  /* Signal (verified darkened from #1F8A4C: white on it was 4.4:1, now 5.4:1) */
  --color-verified: #197A42;
  --color-verified-light: #E4F4EA;
  --color-rent: #2563A8;
  --color-rent-light: #E5EFF9;
  --color-warn: #B4551D;
  --color-danger: #C0392B;
  --color-danger-light: #FBEAE8;

  /* Elevation */
  --shadow-soft: 0 4px 16px rgba(30, 27, 26, 0.08);
  --shadow-lift: 0 12px 32px rgba(30, 27, 26, 0.14);
  --shadow-card: 0 1px 2px rgba(30, 27, 26, 0.06), 0 8px 24px rgba(30, 27, 26, 0.06);

  /* Radius: controls/buttons 8, cards 12, panels/hero surfaces 16. */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Type: two families only. Display = headings/prices, body = everything
     else (nav, forms, buttons, dashboard). */
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* Type scale (rem). Headings h1-h4 live in base.css. */
  --fs-2xs: 0.6875rem;  /* badges, overlines            11px */
  --fs-xs: 0.75rem;     /* captions, metadata           12px */
  --fs-sm: 0.8125rem;   /* labels, helper text          13px */
  --fs-md: 0.875rem;    /* compact UI text              14px */
  --fs-base: 0.9375rem; /* buttons, card body           15px */
  --fs-body: 1rem;      /* long-form body               16px */
  --fs-lead: 1.0625rem; /* section lead paragraph       17px */

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Controls: one height for buttons and form fields */
  --control-h: 48px;
  --control-h-sm: 40px;

  /* Focus ring: brand-dark is 5.7:1 on light surfaces. Dark surfaces
     (topbar, footer, hero, overlays) re-point this to white in base.css. */
  --color-focus: var(--color-brand-dark);

  /* Breakpoints (media queries cannot read custom properties; new rules
     should use only these): 640 phone, 980 tablet / filter-panel collapse,
     1180 header collapses to the drawer. */

  /* Layout */
  --container: 1400px;
  --container-wide: 1450px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-pad-y: clamp(48px, 7vw, 88px);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* Z-index scale */
  --z-nav: 100;
  --z-sticky-cta: 150;
  --z-drawer: 200;
  --z-overlay: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}