/* ============================================================
   design-tokens.css
   The single source of truth for the Propworths visual system.

   Every production page should <link> this stylesheet first.
   Components defined in components.html consume only these tokens
   so any change here cascades everywhere.

   Tokens are derived from PROPWORTHS_FULL_WEBAPP.html
   (canonical CSS extracted in spec-styles.css) but scaled to
   production-readable sizes. The spec mockup renders inside a
   shrunken fake-browser frame at 7-12px font sizes; production
   needs 12-32px to be readable on a real screen at 1440px wide.

   When the design changes, edit ONLY this file. Pages should not
   hard-code colours, font sizes, or spacing values.
   ============================================================ */

:root {

  /* ── COLOURS (verbatim from spec) ── */
  --color-navy:         #141B2B;   /* primary dark — topbar, dark hero */
  --color-navy-dark:    #0E1422;   /* deepest dark — page background dark mode */
  --color-navy-soft:    #1a2535;   /* hover / panel on dark */
  --color-cream:        #F5EFE4;   /* primary light — input bg, card lab text */
  --color-cream-2:      #FAF6EC;   /* page bg light, filter bar, results bar */
  --color-gold:         #C4A47C;   /* brand accent — buttons, badges, highlights */
  --color-gold-soft:    #b8976a;   /* hover */
  --color-gold-dark:    #a18760;   /* active / pressed */
  --color-text:         #141B2B;   /* primary text on cream bg */
  --color-text-on-navy: #F5EFE4;   /* primary text on navy bg */
  --color-muted:        #5F5E5A;   /* secondary text — agent line, sort label */
  --color-muted-soft:   rgba(20,27,43,0.45);  /* placeholder text */
  --color-line:         rgba(196,164,124,0.25);  /* hairline borders */
  --color-line-soft:    rgba(20,27,43,0.08);     /* card border */
  --color-danger:       #A32D2D;   /* PRICE DROP badge, LIVE auction */
  --color-warn:         #D97706;
  --color-success:      #16A34A;

  /* ── FONTS ── */
  /* Body font: clean sans for everything except the photo overlay label.
     Spec uses Arial; we keep DM Sans as primary with Arial fallback so
     existing rendered pages stay consistent. */
  --font-body:    'DM Sans','Segoe UI',Arial,system-ui,sans-serif;
  /* Display font: Georgia serif italic — used ONLY for the .lab photo
     overlay (e.g. "Constantia villa"). Do NOT use Cinzel here — Cinzel
     auto-renders uppercase which breaks the spec's mixed-case style. */
  --font-display: Georgia,'Times New Roman',serif;

  /* ── TYPE SCALE — tightened to ~1.25x spec mockup so visual proportions match ── */
  --fs-xs:    10px;   /* tiny — pagination dots, photo-count, agent line */
  --fs-sm:    11px;   /* small — agent name, secondary labels */
  --fs-base:  12px;   /* default body, filter chips, sort dropdown */
  --fs-md:    13px;   /* card title, search placeholder */
  --fs-lg:    14px;   /* search input value, results count count-bold */
  --fs-xl:    16px;   /* card price */
  --fs-2xl:   20px;   /* section title, hero subtitle */
  --fs-3xl:   26px;   /* page H1 */

  /* ── WEIGHTS ── */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;

  /* ── SPACING SCALE — tightened from generous 4-multiple to spec-proportional ── */
  --sp-1:   3px;
  --sp-2:   6px;
  --sp-3:   10px;
  --sp-4:   14px;
  --sp-5:   18px;
  --sp-6:   22px;
  --sp-8:   28px;
  --sp-10:  36px;
  --sp-12:  44px;
  --sp-16:  56px;

  /* ── RADII ── */
  --r-xs:    4px;    /* badges */
  --r-sm:    6px;    /* chips, buttons, photo labels */
  --r-md:    8px;    /* search input, segmented toggle */
  --r-lg:    12px;   /* cards */
  --r-xl:    16px;   /* large panels */
  --r-pill:  999px;  /* country pill */

  /* ── SHADOWS ── */
  --sh-card:        0 2px 8px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  --sh-card-hover:  0 6px 22px rgba(20,27,43,0.10), 0 14px 40px rgba(20,27,43,0.08);
  --sh-on-photo:    0 2px 6px rgba(0,0,0,0.30);    /* badges, hearts on photo */
  --sh-search:      0 2px 8px rgba(0,0,0,0.15);    /* search input on navy hero */

  /* ── LAYOUT ── */
  --max-w:   1220px;
  --topbar-h: 44px;   /* tightened from 56 — spec topbar is compact */
}