/* ==========================================================================
   DESIGN TOKENS — Jim's Garage Doors Perth
   variables.css
   ========================================================================== */

/* Google Fonts
   ========================================================================== */
@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 Design Tokens
   ========================================================================== */
:root {

  /* ---- Brand Colors (Western Australia Theme) ---- */
  --color-primary:        #1A2530;   /* Deep Charcoal / Dark Navy Authority */
  --color-primary-light:  #2B3746;   /* Medium Charcoal Slate */
  --color-primary-dark:   #0E151D;   /* Almost Black */
  --color-accent:         #D35400;   /* Rich Terracotta / Warm Sand Amber */
  --color-accent-light:   #E67E22;   /* Coastal Sand Amber */
  --color-accent-dark:    #B23E00;   /* Sunset Terracotta */
  
  /* ---- Supporting Colors ---- */
  --color-eucalyptus:     #5F7D75;   /* Muted Sage / Eucalyptus */
  --color-eucalyptus-light: #8FA8A1;  /* Light Sage */
  --color-limestone:      #F5EBE0;   /* Warm Limestone Sand */

  /* ---- Semantic Colors ---- */
  --color-success:        #2E7D32;   /* Forest Green Success */
  --color-emergency:      #C62828;   /* Deep Red Emergency Callouts */

  /* ---- Backgrounds ---- */
  --color-bg:             #FAF8F5;   /* Warm Off-White Main Background */
  --color-bg-white:       #FFFFFF;   /* Pure White */
  --color-bg-alt:         #F3EDE2;   /* Sand / Limestone Alternate Section background */

  /* ---- Text ---- */
  --color-text:           #2C3539;   /* Charcoal text for better readability */
  --color-text-muted:     #6C7A81;   /* Muted Slate Grey text */

  /* ---- Borders ---- */
  --color-border:         #E5DDD3;   /* Light Limestone Border */

  /* ---- Typography ---- */
  --font-headings:        'Outfit', sans-serif;
  --font-body:            'Inter', 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:            4rem;      /* 64px */

  /* ---- Border Radii ---- */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            16px;

  /* ---- Shadows ---- */
  --shadow-sm:            0 2px 4px rgba(26, 37, 48, 0.04),
                          0 1px 2px rgba(26, 37, 48, 0.03);
  --shadow-md:            0 8px 16px rgba(26, 37, 48, 0.06),
                          0 4px 8px rgba(26, 37, 48, 0.04);
  --shadow-lg:            0 16px 36px rgba(26, 37, 48, 0.1),
                          0 6px 16px rgba(26, 37, 48, 0.05);
  --shadow-accent:        0 8px 24px rgba(211, 84, 0, 0.2),
                          0 4px 8px rgba(211, 84, 0, 0.1);

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

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