/* ==========================================================================
   Vistaar Homes — Design tokens
   --------------------------------------------------------------------------
   Every colour, font, spacing and shadow used on the site lives here.
   Change a token once and the whole site updates.
   Contrast checked against WCAG AA (4.5:1 for text).
   ========================================================================== */

:root {
  /* ---------- Brand colours ---------- */
  --brand:        #ee7e39;   /* Accent orange — rules, icons, text on dark (5.8:1 on ink) */
  --brand-600:    #b35718;   /* Button fill with white text (4.9:1) */
  --brand-700:    #a9501a;   /* Orange text on light backgrounds (5.5:1) */
  --brand-tint:   #fbeee4;   /* Soft orange wash */

  /* ---------- Neutrals ---------- */
  --ink:          #1f2328;   /* Headings, body text, dark sections */
  --ink-900:      #15181c;   /* Deepest dark (footer, dark panels) */
  --ink-soft:     #4a4f55;   /* Secondary text */
  --ink-muted:    #6b7178;   /* Captions, meta (4.9:1 on white) */
  --on-dark:      #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.74);
  --on-dark-line: rgba(255, 255, 255, 0.14);

  --surface:      #ffffff;
  --surface-alt:  #f6f4f1;   /* Warm stone section background */
  --surface-warm: #faf9f7;
  --line:         #e6e2dc;   /* Hairline borders */
  --line-strong:  #cfc9c0;

  /* ---------- Feedback ---------- */
  --success:      #1f7a4d;
  --success-bg:   #effaf4;
  --error:        #b42318;
  --error-bg:     #fff2f0;

  /* ---------- Typography ---------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-xs:   0.75rem;    /* 12px — eyebrows, badges */
  --fs-sm:   0.875rem;   /* 14px — meta, buttons */
  --fs-base: 1rem;       /* 16px — body */
  --fs-lg:   1.0625rem;  /* 17px — intros */
  --fs-h3:   clamp(1.5rem, 1.3rem + 0.8vw, 1.95rem);
  --fs-h2:   clamp(2.1rem, 1.6rem + 2vw, 3.25rem);
  --fs-h1:   clamp(2.6rem, 1.7rem + 3.8vw, 4.9rem);

  --lh-tight: 1.06;
  --lh-body:  1.7;
  --tracking-caps: 0.16em;

  /* ---------- Spacing & layout ---------- */
  --nav-height:    72px;
  --section-space: 72px;
  --gutter:        16px;
  --container-max: 1320px;

  /* ---------- Shape: sharp, architectural edges ---------- */
  --radius: 0;
  --rule:   1px solid var(--line);

  /* ---------- Elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04), 0 2px 8px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 2px 4px rgba(17, 24, 39, 0.04), 0 12px 32px rgba(17, 24, 39, 0.09);
  --shadow-lg: 0 6px 12px rgba(17, 24, 39, 0.06), 0 28px 64px rgba(17, 24, 39, 0.16);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration:  0.35s;

  /* ---------- Bootstrap 5.3 variable overrides ---------- */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--surface);
  --bs-primary: var(--brand-600);
  --bs-primary-rgb: 179, 87, 24;
  --bs-link-color: var(--brand-700);
  --bs-link-color-rgb: 169, 80, 26;
  --bs-link-hover-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-pill: 0;
  --bs-focus-ring-color: rgba(179, 87, 24, 0.3);
}

/* Larger screens: taller header, more breathing room */
@media (min-width: 768px) {
  :root {
    --nav-height: 80px;
    --section-space: 96px;
    --gutter: 24px;
  }
}

@media (min-width: 1200px) {
  :root {
    --nav-height: 88px;
    --section-space: 120px;
  }
}