/* ============================================================
   AAARealEstate.ng — Design Tokens
   Load order: tokens.css → base.css → layout.css →
   components.css → responsive.css → page-specific CSS (if any)
   No page/component should declare a raw hex color or
   font-family outside of this file — always reference the
   variables below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {

  /* ---------------------------------------------------------
     COLOR
     Rule: brass is the ONLY saturated accent used for action
     (buttons, links, price). Indigo carries structure/headers.
     Sage is status-only. No gradients, no shadow-glows.
     --------------------------------------------------------- */
  --bg-base:      #FAF9F5;  /* page background — warm off-white */
  --bg-raised:    #FFFFFF;  /* cards, modals, dropdowns sitting above bg-base */
  --ink:          #1E2A2F;  /* body text — deep charcoal-teal, not pure black */
  --ink-muted:    #5B6A6E;  /* secondary text, meta info, placeholders */

  --indigo:       #22355B;  /* primary brand — nav, headers, primary buttons */
  --indigo-hover: #1A2947;

  --brass:        #B8863B;  /* accent — CTAs, price tags, stamp badge, links */
  --brass-hover:  #9C7130;
  --brass-tint:   #F3E9D6;

  --sage:         #5C6E5A;  /* status only — "available", success states */
  --sage-tint:    #E7ECE5;

  --danger:       #A3423A;  /* rejected/expired status, form errors only */
  --danger-tint:  #F3E3E1;

  --line:         #E4E0D6;  /* hairline borders, card outlines, table dividers */
  --line-strong:  #CFC9B8;

  /* ---------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', monospace; /* ALL figures: price, sqm, beds, phone */

  --fs-hero:  clamp(2rem, 4vw, 3.25rem);
  --fs-h1:    clamp(1.6rem, 2.8vw, 2.25rem);
  --fs-h2:    1.5rem;
  --fs-h3:    1.15rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-price: 1.25rem;

  --lh-tight:  1.15;
  --lh-normal: 1.5;

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

  /* ---------------------------------------------------------
     RADIUS — minimal on data-heavy elements; rounded only
     where meaningful (stamp badge)
     --------------------------------------------------------- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-badge: 999px;

  /* ---------------------------------------------------------
     MOTION — hover/press only, no fade-in-everything
     --------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-mid:  150ms;

  /* ---------------------------------------------------------
     ELEVATION — flat color + real borders, minimal shadow
     --------------------------------------------------------- */
  --shadow-card-hover: 0 2px 8px rgba(30, 42, 47, 0.08);

  /* ---------------------------------------------------------
     LAYOUT / BREAKPOINTS
     --------------------------------------------------------- */
  --container-max: 1200px;
  --nav-height:    72px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}