/* ==========================================================================
   Homesafe Inspections — Design Tokens
   Extracted from live site: www.homesafeinspections.com.au
   ========================================================================== */

:root {
  /* ---- Colors (exact match to live site) ---- */
  --accent:         #D9E670;  /* rgb(217, 230, 112) — CTA buttons, highlights */
  --accent-hover:   #C8D560;  /* slightly darker on hover */
  --accent-soft:    #E1E4B7;  /* olive/sage — section backgrounds, strips */

  --bg-white:       #FFFFFF;
  --bg-cream:       #F7F5EE;  /* rgb(247, 245, 238) — card backgrounds */
  --bg-warm:        #F5F4F1;  /* rgb(245, 244, 241) — section backgrounds */

  --text-dark:      #212529;  /* rgb(33, 37, 41) — body text, nav links */
  --text-grey:      #6B6B6B;  /* rgb(107, 107, 107) — headings, paragraphs, footer */
  --text-muted:     rgba(0, 0, 0, 0.55);  /* nav buttons, secondary text */

  --footer-bg:      #6B6B6B;
  --footer-text:    #737373;  /* rgb(115, 115, 115) */

  --error:          #D94F4F;
  --success:        #5AAF6D;

  /* ---- Typography ---- */

  /* Primary fonts from live site — self-hosted OTF files on Azure Blob.
     PRODUCTION: Ramy already has these fonts loaded in the C# MVC project.
     For mockup preview, we fall back to Google Fonts equivalents. */

  --font-body:      'Gordita', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading:   'TestTiemposFine', 'Playfair Display', Georgia, serif;
  --font-accent:    'Founders Grotesk', 'Montserrat', sans-serif;

  /* Type scale */
  --text-xs:        11px;     /* small labels */
  --text-sm:        13px;     /* body small, nav, badges */
  --text-base:      15px;     /* body text (11pt) */
  --text-md:        17px;     /* h5 subheadings */
  --text-lg:        20px;     /* buttons, large body */
  --text-xl:        28px;     /* h2 section headings (28pt on live site) */
  --text-2xl:       37px;     /* h2 large */
  --text-3xl:       48px;     /* h1 hero mobile */
  --text-4xl:       56px;     /* h1 hero desktop */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-normal: 1.6;      /* 23pt line height at 11pt = ~2.1, but we use 1.6 for readability */
  --leading-loose:  2.1;      /* matches live site paragraph line-height: 23pt */

  /* Font weights */
  --weight-light:   300;
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* ---- Spacing ---- */
  --space-xs:       8px;
  --space-sm:       12px;
  --space-md:       16px;
  --space-lg:       24px;
  --space-xl:       32px;
  --space-2xl:      48px;
  --space-3xl:      60px;
  --space-4xl:      80px;

  /* Page padding */
  --page-padding:   60px;
  --page-padding-mobile: 24px;
  --max-width:      1200px;

  /* ---- Borders & Shadows ---- */
  --border-light:   1px solid rgba(0, 0, 0, 0.06);
  --border-medium:  2px solid rgba(0, 0, 0, 0.1);
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:      0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-lg:      0 8px 30px rgba(0, 0, 0, 0.08);
  --radius-sm:      2px;
  --radius-md:      4px;
  --radius-full:    50%;

  /* ---- Transitions ---- */
  --transition-fast:   0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow:   0.5s ease;

  /* ---- Breakpoints (for reference — used in responsive.css) ---- */
  /* Mobile:  < 768px   */
  /* Tablet:  768-1024px */
  /* Desktop: > 1024px  */
}