/* ==========================================================================
   DESIGN TOKENS — Garage Door Repairs Dee Why, NSW
   Coastal Palette & Modern Typography
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Coastal Brand Colors (Dee Why / Northern Beaches) ---- */
  --color-primary:        #0A2540;   /* Deep Ocean Navy */
  --color-primary-light:  #143A66;   /* Rich Coastal Blue */
  --color-primary-dark:   #051525;   /* Abyss Navy */
  --color-ocean:          #0284C7;   /* Pacific Azure */
  --color-ocean-light:    #38BDF8;   /* Dee Why Surf Cyan */
  --color-accent:         #F59E0B;   /* Warm Coastal Amber / Sun Gold */
  --color-accent-light:   #FBBF24;   /* Golden Sand */
  --color-accent-dark:    #D97706;   /* Deep Amber CTA */

  /* ---- Semantic Colors ---- */
  --color-success:        #10B981;   /* Emerald Verified */
  --color-emergency:      #DC2626;   /* 24/7 Red Alert */
  --color-emergency-hover:#B91C1C;

  /* ---- Backgrounds & Surfaces ---- */
  --color-bg:             #F8FAFC;   /* Crisp Sand Gray */
  --color-bg-white:       #FFFFFF;
  --color-bg-alt:         #F0F6FA;   /* Ocean Breeze Tint */
  --color-bg-dark:        #0A2540;   /* Deep Navy Card / Footer */

  /* ---- Text ---- */
  --color-text:           #0F172A;   /* Slate 900 */
  --color-text-muted:     #475569;   /* Slate 600 */
  --color-text-light:     #F8FAFC;

  /* ---- Borders ---- */
  --color-border:         #E2E8F0;
  --color-border-light:   #F1F5F9;

  /* ---- Typography ---- */
  --font-headings:        'Outfit', sans-serif;
  --font-body:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Spacing Scale ---- */
  --space-2xs:            0.25rem;   /*  4px */
  --space-xs:             0.5rem;    /*  8px */
  --space-sm:             0.75rem;   /* 12px */
  --space-md:             1rem;      /* 16px */
  --space-lg:             1.5rem;    /* 24px */
  --space-xl:             2rem;      /* 32px */
  --space-2xl:            3rem;      /* 48px */
  --space-3xl:            4.5rem;    /* 72px */

  /* ---- Border Radii ---- */
  --radius-sm:            6px;
  --radius-md:            12px;
  --radius-lg:            20px;
  --radius-full:          9999px;

  /* ---- Premium Shadows ---- */
  --shadow-sm:            0 1px 3px rgba(10, 37, 64, 0.08), 0 1px 2px rgba(10, 37, 64, 0.04);
  --shadow-md:            0 6px 18px rgba(10, 37, 64, 0.08), 0 2px 6px rgba(10, 37, 64, 0.04);
  --shadow-lg:            0 14px 40px rgba(10, 37, 64, 0.12), 0 4px 16px rgba(10, 37, 64, 0.06);
  --shadow-accent:        0 8px 24px rgba(245, 158, 11, 0.35);
  --shadow-card-hover:    0 20px 45px rgba(10, 37, 64, 0.14), 0 6px 16px rgba(2, 132, 199, 0.08);

  /* ---- Transitions ---- */
  --transition-fast:      0.15s ease;
  --transition-normal:    0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:      0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layout ---- */
  --max-width:            1280px;
}