/*
 * BC Condos & Homes — Design Tokens
 * ==================================
 * CSS custom properties (variables) for the public-facing site.
 * Include this file in BOTH layout families before all other stylesheets.
 *
 * Purpose: every subsequent per-page design pass draws colours, fonts,
 * spacing, radii, and shadows from here — not from hardcoded hex values.
 *
 * Nothing in this file changes the visual output of any existing rule.
 * Tokens are only consumed when page/component CSS explicitly uses var(--…).
 *
 * HOW TO USE IN NEW/UPDATED CSS:
 *   color: var(--color-accent);          instead of  #df4611
 *   font-family: var(--font-body);       instead of  Circular,-apple-system,…
 *   padding: var(--space-md);            instead of  16px
 *
 * LEGACY VALUES EACH TOKEN REPLACES (for grep / find-replace reference):
 *   --color-accent     ← #df4611, #EF4223, #e64a19, #ed5e2f  (brand orange-red)
 *   --color-accent-alt ← #ee4223, #EE4223, #EF4222            (signup/form variant)
 *   --color-accent-dark← #df3011, #d14a00, #de4230            (hover / sold darker)
 *   --color-link       ← #2c6fad, #337ab7                     (body links)
 *   --color-link-bright← #0077b5, #007cdc, #0f78b3            (active / CTA links)
 *   --color-text-dark  ← #333, #333333, #2c2c2c               (primary text)
 *   --color-text-body  ← #555, #4a4a4a, #444                  (body copy)
 *   --color-text-muted ← #777, #767676, #848484               (secondary/meta)
 *   --color-text-subtle← #9b9b9b, #979797, #888               (placeholder/hint)
 *   --color-border     ← #e4e4e4, #e8e0d8, #ddd               (standard borders)
 *   --color-border-light← #eee, #ccc                          (light dividers)
 *   --color-bg-subtle  ← #f8f9fa, #f7f7f7, #f4f4f4            (page backgrounds)
 *   --color-bg-warm    ← #e2dbd2, #fafaf8                     (warm-tinted surfaces)
 *   --color-success    ← #6dd000, #0f9d58                     (active/available)
 *   --color-sold       ← #df3011, #f8464a                     (sold/negative)
 *   --color-gold       ← #dcac1c, #e5b021, #e4b123            (market badge / gold)
 */

:root {

  /* ── Colours: Brand Accent (orange-red) ─────────────────────────────── */
  --color-accent:       #df4611;   /* listing prices, primary CTAs, status badges */
  --color-accent-alt:   #ee4223;   /* login/signup buttons, form highlights        */
  --color-accent-dark:  #df3011;   /* hover states, darker sold indicators         */
  --color-accent-bg:    rgba(223, 70, 17, 0.07); /* light tinted backgrounds       */

  /* ── Colours: Blue Links / CTAs ─────────────────────────────────────── */
  --color-link:         #2c6fad;   /* standard body links, breadcrumbs             */
  --color-link-bright:  #0077b5;   /* active filters, highlighted links            */
  --color-link-dark:    #1a4a7a;   /* hover on dark backgrounds                   */

  /* ── Colours: Text Hierarchy ────────────────────────────────────────── */
  --color-text-dark:    #333;      /* headings, primary labels                     */
  --color-text-body:    #555;      /* standard body copy                           */
  --color-text-muted:   #777;      /* secondary metadata, subheadings              */
  --color-text-subtle:  #9b9b9b;   /* placeholders, hints, tertiary labels         */

  /* ── Colours: Neutrals / Backgrounds ───────────────────────────────── */
  --color-white:        #fff;
  --color-bg:           #fff;      /* page background                             */
  --color-bg-subtle:    #f8f9fa;   /* card inner backgrounds, light sections      */
  --color-bg-warm:      #e2dbd2;   /* warm-tinted surface (top-realtor strips)    */
  --color-border:       #e4e4e4;   /* standard component borders                  */
  --color-border-light: #eee;      /* light dividers, table rules                 */

  /* ── Colours: Status ────────────────────────────────────────────────── */
  --color-success:      #6dd000;   /* active/available listing status dot         */
  --color-sold:         #df3011;   /* sold listing price / indicator              */
  --color-gold:         #dcac1c;   /* market badge (Buyer's / Seller's Market)    */
  --color-gold-dark:    #b8960e;   /* hover on gold elements                      */

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-body:    Circular, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --font-heading: 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;  /* login modal, metered gate */
  --font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Product Sans', Roboto, sans-serif;

  /* ── Spacing (4 px base scale) ──────────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* ── Border Radius ──────────────────────────────────────────────────── */
  --radius-sm:  4px;    /* tags, small chips                                 */
  --radius-md:  8px;    /* cards, panels, dropdowns                          */
  --radius-lg:  16px;   /* large cards, modal corners                        */
  --radius-pill: 999px; /* pill badges, full-round buttons                   */

  /* ── Shadows / Elevation ────────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.07);            /* resting card      */
  --shadow-md:  0 3px 14px rgba(0,0,0,0.10);           /* hovered card      */
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.14);           /* modal / overlay   */
  --shadow-hdr: 0 2px 8px rgba(0,0,0,0.08);            /* sticky nav bar    */
}