/*
  Design tokens — Joanna Zatorska Real Estate (zatorskarealestate.com)
  Structural base: Concept D (see docs/32, docs/33). Every color used
  anywhere in the theme must reference one of these custom properties,
  never a literal hex value in component CSS — that's what lets the brand
  direction (including the provisional logo) change later without
  touching markup or component files.

  Status: APPROVED for Milestone 1 (white/warm off-white + navy/graphite +
  cobalt + restrained gold). See docs/36_DESIGN_SYSTEM.md.
*/

:root {
  /* ---------- Color: neutrals ---------- */
  --color-bg:            #FAF9F6; /* page ground — warm off-white, not clinical cool-white */
  --color-surface:       #FFFFFF; /* cards, panels, the utility search box */
  --color-surface-alt:   #F3F1EB; /* alternating section backgrounds, inactive tab fill — warm, not blue-gray */
  --color-border:        #E5E1D8;

  /* ---------- Color: dark structural (navy / graphite) ---------- */
  --color-navy:          #10233F; /* nav bar, footer, dark section backgrounds, headings on light */
  --color-navy-deep:     #0A1930; /* darkest gradient stop / hover on navy elements */
  --color-graphite:      #232629; /* body text, secondary dark neutral */
  --color-ink:           #14181F; /* primary text color (near-black, cool-biased) */
  --color-muted:         #5B6472; /* secondary/meta text */

  /* ---------- Color: cobalt (primary interactive / brand) ---------- */
  --color-cobalt:        #1E48C4; /* primary buttons, active states, links, price figures */
  --color-cobalt-hover:  #17379A;
  --color-cobalt-tint:   #E8EEFC; /* subtle backgrounds behind cobalt-accented elements */

  /* ---------- Color: gold (restrained accent ONLY — never a large fill) ---------- */
  --color-gold:          #A9863F; /* thin rules, badges, active-tab underline, star ratings, small icon accents */
  --color-gold-deep:     #8C6B2E; /* hover/pressed state for gold-accented elements */
  --color-gold-tint:     #F6EFDD; /* rare, small-area background only (e.g. a "featured" badge fill) */

  /* Explicit non-goal: gold is an ACCENT, not a base. Do not fill large
     surfaces, primary buttons, or backgrounds with gold — see docs/34 and
     the owner's own instruction against a "black-and-gold luxury cliché." */

  /* ---------- Semantic aliases (component CSS should prefer these) ---------- */
  --color-action:        var(--color-cobalt);       /* every real conversion CTA */
  --color-action-hover:  var(--color-cobalt-hover);
  --color-brand:         var(--color-navy);         /* structural/brand surfaces */
  --color-accent:        var(--color-gold);         /* restrained premium accent only */

  /* ---------- Typography (unchanged from Concept D) ---------- */
  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body:    'Public Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace; /* prices, stats, tabular data only */
  /* Editorial serif — reserved for a handful of emotional/brand moments
     (hero headline, the reviews stat, section eyebrows-adjacent big
     numerals). Everything structural/UI stays on --font-display so the
     site doesn't read as "two competing typefaces." */
  --font-serif:   'Fraunces', Georgia, 'Times New Roman', serif;

  --text-hero:    2.5rem;
  --text-h2:      clamp(1.6rem, 1.35rem + 1vw, 2.1rem);
  --text-h3:      1.15rem;
  --text-body:    1rem;
  --text-small:   0.86rem;
  --text-micro:   0.72rem;
  --leading-tight: 1.1;
  --leading-body:  1.6;

  /* ---------- Spacing scale (use gap/padding from this scale only) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 36px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px; /* generous desktop section breathing room — the "less template" whitespace pass */

  /* ---------- Radii ---------- */
  --radius-sm: 6px;   /* inputs, small chips */
  --radius-md: 10px;  /* cards */
  --radius-lg: 16px;  /* hero imagery, the utility search panel */
  --radius-pill: 999px;

  /* ---------- Shadows (spend sparingly — one elevation level, used once per view) ---------- */
  --shadow-panel: 0 10px 30px -18px rgba(16, 35, 63, 0.35); /* the search utility panel only */
  --shadow-none: none;

  /* ---------- Breakpoints (documented; enforced via media queries, not custom props at runtime) ---------- */
  /* mobile:  max-width 430px
     tablet:  431px – 820px
     desktop: 821px+            */

  /* ---------- Focus state (accessibility — required on every interactive element) ---------- */
  --focus-ring: 0 0 0 3px var(--color-cobalt-tint), 0 0 0 1px var(--color-cobalt);

  /* ---------- Status (semantic — separate from the brand accent, per design-system rules) ---------- */
  --color-status-new:    var(--color-cobalt);
  --color-status-sold:   var(--color-gold-deep);
  --color-demo-badge:    rgba(16, 35, 63, 0.82); /* labels any placeholder/demo content, e.g. "DEMO DATA" */

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad: 6%;
}