/* Design tokens for Kelowna Real Estate ("Okanagan Sunset").
   Palette: warm sand paper, deep lake blue for the header and footer, lake blue for
   action, terracotta sunset for highlights, orchard sage and apricot gold for accents.
   Every text/background pair below meets WCAG AA (4.5:1) or better. */
:root {
  /* Colour: surfaces */
  --color-paper: #fdf8ee;        /* page background (warm sand) */
  --color-mist: #f3e8d3;         /* cards, alternate bands */
  --color-deep: #123f5a;         /* header, footer, hero band (deep lake) */
  /* Colour: text */
  --color-ink: #1f2a33;          /* body text: paper 13.8:1, mist 12.0:1 */
  --color-ink-soft: #51606b;     /* secondary text: paper 6.1:1, mist 5.4:1 */
  --color-on-deep: #fdf8ee;      /* text on deep 10.5:1 */
  --color-on-primary: #ffffff;   /* text on lake-blue buttons 7.2:1 */
  /* Colour: accents */
  --color-primary: #145d82;      /* links, buttons: paper 6.8:1, mist 5.9:1 */
  --color-highlight: #a9441c;    /* terracotta eyebrows, tags: paper 5.6:1, mist 4.9:1 */
  --color-sage: #3f6b4a;         /* orchard green accent text: paper 5.8:1 */
  --color-primary-light: #a9dcf2; /* links on deep 7.5:1 */
  --color-highlight-light: #f2c566; /* apricot highlight on deep 6.9:1 */
  --color-gold: #f2c566;         /* current-page marker on deep 6.9:1 */
  --color-focus: #f2c566;        /* focus ring on deep; on paper use --color-primary */
  --color-line: #e3d4b8;         /* borders and rules (decorative) */

  /* Gradients */
  --gradient-deep: linear-gradient(135deg, #123f5a 0%, #1a5c7a 55%, #2a7a8c 100%);
  --gradient-spark: linear-gradient(90deg, #e2793e, #f2c566 50%, #3f9bb8);
  --gradient-sunset: linear-gradient(180deg, #fbd9a8 0%, #f6b98a 55%, #e9967a 100%);

  /* Type: system fonts only */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --weight-display: 700;

  /* Type scale (1.25 ratio, fluid at the top end) */
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1.0625rem;
  --text-lg: 1.3rem;
  --text-xl: clamp(1.55rem, 1.3rem + 1vw, 1.95rem);
  --text-2xl: clamp(2rem, 1.6rem + 2vw, 2.9rem);
  --text-3xl: clamp(2.6rem, 1.7rem + 4vw, 4.6rem);
  --leading-tight: 1.15;
  --leading-body: 1.7;
  --measure: 66ch;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.75rem;
  --space-6: 3rem;
  --space-7: 5rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --shadow-card: 0 2px 4px rgba(31, 42, 51, 0.06), 0 10px 26px rgba(18, 63, 90, 0.12);
  --content-width: 70rem;

  /* Aliases kept so existing stylesheets keep working */
  --color-navy: var(--color-deep);
  --color-on-navy: var(--color-on-deep);
  --color-teal: var(--color-primary);
  --color-amber: var(--color-highlight);
  --color-teal-light: var(--color-primary-light);
  --color-amber-light: var(--color-highlight-light);
  --color-bg: var(--color-paper);
  --color-text: var(--color-ink);
  --color-accent: var(--color-primary);
  --space: var(--space-4);
}