/* ==========================================================================
   DESIGN TOKENS - Garage Door Repairs Northern Beaches
   Sydney Sandstone Design System - Warm, Earthy, Premium Australian Coastal
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ── Warm Sandstone Palette - Northern Beaches Signature ──────────── */

  /* Primary: Warm Charcoal (Stone family - NOT cold navy) */
  --color-stone-950:  #0C0A09;
  --color-stone-900:  #1C1917;   /* Rich Warm Charcoal (Primary Brand) */
  --color-stone-800:  #292524;   /* Deep Stone */
  --color-stone-700:  #44403C;   /* Medium Stone */

  /* Brand Accent: Eucalyptus Teal (Green-teal - NOT azure blue) */
  --color-teal-800:   #115E59;
  --color-teal-700:   #0F766E;   /* Eucalyptus Teal (Brand Accent) */
  --color-teal-600:   #0D9488;   /* Bright Teal */
  --color-teal-400:   #2DD4BF;   /* Seafoam Highlight */
  --color-teal-100:   #CCFBF1;   /* Mint Wash */
  --color-teal-50:    #F0FDFA;   /* Ultra-soft Mint */

  /* CTA: Burnt Terracotta (Earthy orange - NOT golden amber) */
  --color-terracotta-700: #C2410C;  /* Deep Clay */
  --color-terracotta-600: #EA580C;  /* Burnt Terracotta (Primary CTA) */
  --color-terracotta-500: #F97316;  /* Bright Orange Hover */
  --color-terracotta-100: #FFEDD5;  /* Peach Tint */

  /* ── Semantic Mapping ───────────────────────────────────────────── */
  --color-ink:          #1C1917;   /* Stone 900 */
  --color-body:         #44403C;   /* Stone 700 */
  --color-muted:        #78716C;   /* Stone 500 */
  --color-line:         #D6D3D1;   /* Stone 300 */
  --color-surface:      #FFFFFF;
  --color-surface-soft: #FAFAF9;   /* Stone 50 - warm white */
  --color-surface-alt:  #F5F5F4;   /* Stone 100 - sandstone mist */
  --color-success:      #059669;   /* Emerald 600 */
  --color-danger:       #DC2626;

  /* ── Coastal Brand Colors (Northern Beaches) ────────────────────── */
  --color-primary:        #1C1917;   /* Warm Charcoal */
  --color-primary-light:  #292524;   /* Deep Stone */
  --color-primary-dark:   #0C0A09;   /* Rich Black-Stone */
  --color-ocean:          #0F766E;   /* Eucalyptus Teal */
  --color-ocean-light:    #0D9488;   /* Bright Teal */
  --color-accent:         #EA580C;   /* Burnt Terracotta */
  --color-accent-light:   #F97316;   /* Bright Orange Hover */
  --color-accent-dark:    #C2410C;   /* Deep Clay Active */

  /* ── Semantic Colors ────────────────────────────────────────────── */
  --color-emergency:      #EA580C;   /* Terracotta (unified CTA) */
  --color-emergency-hover:#F97316;

  /* ── Backgrounds & Surfaces ─────────────────────────────────────── */
  --color-bg:             #FAFAF9;   /* Warm Stone 50 */
  --color-bg-white:       #FFFFFF;
  --color-bg-alt:         #F5F5F4;   /* Sandstone Mist */
  --color-bg-dark:        #1C1917;   /* Warm Charcoal Footer */

  /* ── Text ───────────────────────────────────────────────────────── */
  --color-text:           #1C1917;   /* Stone 900 */
  --color-text-muted:     #57534E;   /* Stone 600 */
  --color-text-light:     #FAFAF9;

  /* ── Borders ────────────────────────────────────────────────────── */
  --color-border:         #D6D3D1;   /* Stone 300 - warm gray */
  --color-border-light:   #E7E5E4;   /* Stone 200 */

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-headings:        'Plus Jakarta Sans', sans-serif;
  --font-body:            'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans:            var(--font-body);
  --font-display:         var(--font-headings);

  /* ── 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 (Soft, Modern Architecture) ──────────────────── */
  --radius-sm:            10px;
  --radius-md:            16px;
  --radius-lg:            24px;
  --radius-full:          9999px;

  /* ── Premium Shadows (Warm charcoal tint - NOT cold navy) ───────── */
  --shadow-sm:            0 2px 8px rgba(28, 25, 23, 0.05);
  --shadow-md:            0 8px 24px rgba(28, 25, 23, 0.08);
  --shadow-lg:            0 20px 48px rgba(28, 25, 23, 0.11);
  --shadow-accent:        0 8px 24px rgba(234, 88, 12, 0.30);
  --shadow-card-hover:    0 22px 50px rgba(28, 25, 23, 0.12), 0 6px 18px rgba(15, 118, 110, 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;
}