/* ============================================================
   TOPPIN DESIGN FRAMEWORK — 00 DESIGN TOKENS
   Find Properties in T&T · findpropertiesintt.com
   ------------------------------------------------------------
   This file defines VARIABLES ONLY. It changes nothing visually
   by itself. Every other module reads its colors, spacing, and
   shadows from here, so the whole site can be re-tuned by
   editing this one file.
   ============================================================ */

:root {

	/* ---- Brand colors (agreed design system) ---- */
	--tdf-primary:        #0F6B46;  /* Deep Emerald Green */
	--tdf-primary-dark:   #0B5236;
	--tdf-primary-light:  #E7F3EE;
	--tdf-secondary:      #1F2937;  /* Charcoal */
	--tdf-accent:         #C9A227;  /* Gold */
	--tdf-accent-dark:    #A98618;

	/* ---- Neutrals ---- */
	--tdf-bg:             #F8FAFC;  /* Soft White page background */
	--tdf-surface:        #FFFFFF;  /* Cards */
	--tdf-text:           #1F2937;  /* Body text */
	--tdf-text-muted:     #6B7280;
	--tdf-border:         #E5E7EB;

	/* ---- Status ---- */
	--tdf-success:        #16A34A;
	--tdf-warning:        #D97706;
	--tdf-danger:         #DC2626;

	/* ---- WhatsApp (Click to Chat) ---- */
	--tdf-whatsapp:       #25D366;

	/* ---- Typography ---- */
	--tdf-font-heading:   "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--tdf-font-body:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* ---- Spacing (8px system) ---- */
	--tdf-space-1:  8px;
	--tdf-space-2:  16px;
	--tdf-space-3:  24px;
	--tdf-space-4:  32px;
	--tdf-space-6:  48px;
	--tdf-space-8:  64px;
	--tdf-space-12: 96px;

	/* ---- Radius ---- */
	--tdf-radius-sm: 6px;
	--tdf-radius:    12px;
	--tdf-radius-lg: 20px;
	--tdf-radius-pill: 999px;

	/* ---- Shadows ---- */
	--tdf-shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.06);
	--tdf-shadow:    0 4px 16px rgba(31, 41, 55, 0.08);
	--tdf-shadow-lg: 0 12px 32px rgba(31, 41, 55, 0.12);

	/* ---- Transitions ---- */
	--tdf-transition: 180ms ease;

	/* ---- Layout ---- */
	--tdf-max-width: 1440px;
}