:root {
    --client-color: #203c3e;
    --client-color-light: #dfeced;
    --secondary-color: #B08D57;
    --secondary-color-dark: #7f4f07;
    --secondary-color-light: #fffaf3;
    --bg-color-1:#ded5c1;

	--section-color:#ded5c1;
	--section-bg-color : #3c4748;

    /* Extended gold palette */
	--gold-50:  #fffbeb;
	--gold-100: #fef3c7;
	--gold-200: #fde68a;
	--gold-700: #b45309;
	--gold-800: #92400e;

    --slate-50:  #f8fafc;
	--slate-100: #f1f5f9;
	--slate-200: #e2e8f0;
	--slate-300: #cbd5e1;
	--slate-500: #64748b;
	--slate-600: #475569;
	--slate-700: #334155;
	--slate-800: #1e293b;
	--slate-900: #0f172a;

    --text-primary:  var(--slate-900);
	--text-secondary:var(--slate-600);
	--text-muted:    var(--slate-500);
	--accent:        var(--client-color-700);
	--accent-light:  var(--client-color-500);
	--gold:          var(--gold-500);

    --important:rgb(168, 3, 3);

    --font-display: 'Cormorant Garamond', Georgia, serif;
	--font-body:    'DM Sans', system-ui, sans-serif;
	--font-accent:  'Instrument Serif', Georgia, serif;

	--card-bg:white;

    /* ── Border Radius ─────────────────────────────────────── */
    --radius-2:    2px;      /* scrollbar thumbs, thin decorative bars  */
    --radius-xs:   4px;      /* tiny: badges, progress dots             */
    --radius-tag:  6px;      /* small tags, labels, secondary buttons   */
    --radius-sm:   8px;      /* inputs, buttons, small UI elements      */
    --radius-md:   12px;     /* cards, form panels                      */
    --radius-lg:   16px;     /* large cards, image corners              */
    --radius-xl:   20px;     /* rounded sections, pill tags             */
    --radius-2xl:  24px;     /* large rounded panels, mobile nav        */
    --radius-pill: 9999px;   /* full pill shape                         */

    /* ── Spacing Scale ─────────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;

    /* Legacy aliases (kept for backward compat) */
    --border-radius-sm: var(--radius-xs);
    --card-radius:      var(--radius-xs);
    --padding-xs:       var(--space-1);
    --padding-sm:       var(--space-2);
    --padding-md:       var(--space-3);
}

/* ── Shared colour palette (used by shared.css components) ──────────────── */
:root {
    --color-dark:           #1a2332;
    --color-primary:        #1e3a2f;
    --color-primary-light:  #2d5a44;
    --color-accent:         #c9a84c;
    --color-accent-light:   #e6c97a;
    --color-bg:             #f8f7f4;
    --color-bg-section:     #f2efe9;
    --color-white:          #ffffff;
    --color-text:           #2c3e50;
    --color-text-muted:     #6b7280;
    --color-text-light:     #9ca3af;
    --color-border:         #e5e0d8;
    --color-border-dark:    #d1c9bc;
    --color-success:        #22c55e;
    --color-warning:        #f59e0b;
    --color-info:           #3b82f6;
    --color-tag-bg:         #e8f0ec;
    --color-tag-text:       #1e3a2f;

    --font-display: 'Playfair Display', serif;
    --font-body:    'Inter', sans-serif;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.14);

    /* Override the base radius scale with component-tuned values */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --transition:    0.2s ease;
    --transition-md: 0.3s ease;

    /* Extended UI colours */
    --color-surface:        #f3f4f6;
    --color-heading:        #111827;
    --color-black:          #000000;
    --color-danger:         #e53e3e;
    --color-danger-dark:    #b91c1c;
    --color-success-bg:     #dcfce7;
    --color-success-text:   #166534;
    --color-success-border: #bbf7d0;
    --color-error-bg:       #fee2e2;
    --color-error-text:     #991b1b;
    --color-error-border:   #fecaca;
    --color-warning-bg:     #fffbeb;
    --color-warning-text:   #92400e;
    --color-warning-border: #fde68a;
    --color-info-bg:        #eff6ff;
    --color-info-dark:      #1e40af;
    --color-info-border:    #bfdbfe;
    --color-tag-featured:   #c8860a;
    --color-tag-popular:    #c0392b;
    --color-tag-suggested:  #1a6e4b;
    --color-facebook:       #1877f2;
    --color-linkedin:       #0a66c2;
    --color-whatsapp:       #25d366;
    --color-heart:          #e74c3c;
    --color-love:           #e11d48;
    --color-govuk:          #00703c;
    --color-navy:           #0a192f;
    --color-navy-mid:       #1a3c5e;
    --color-navy-mid-hover: #244f7a;
    --color-pill-market-bg:    #d1fae5;
    --color-pill-market-text:  #065f46;
    --color-pill-mortgage-bg:  #dbeafe;
    --color-pill-buying-bg:    #ede9fe;
    --color-pill-buying-text:  #4c1d95;
    --color-pill-selling-bg:   #fce7f3;
    --color-pill-selling-text: #831843;
}
/* ── Mobile display font ──────────────────────────────────────────────────
   Playfair Display is a high-contrast serif: its hairline strokes thin out and
   read as scratchy/uneven at phone sizes. Below 768px the display face falls
   back to Inter - the only other family self-hosted in fonts.css, so this adds
   no extra webfont request and keeps the type system to two families.
   Weight and tracking are nudged so headings still read as headings rather
   than as body copy. */
@media (max-width: 768px) {
    :root {
        /* --font-display: 'Inter', system-ui, -apple-system, sans-serif; */
        /* .fi-label in shared.css reads --font-heading and falls back to a
           literal 'Playfair Display', so it needs the token set explicitly. */
        --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    }

    h1, h2, h3, h4,
    .fi-label {
        letter-spacing: -0.015em;
        font-weight: 700;
    }
}