/* ==========================================================================
   DESIGN TOKENS — Garage Door Repairs Hills District
   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 ---- */
  --color-primary:        #0C2340;
  --color-primary-light:  #1A365D;
  --color-primary-dark:   #061324;
  --color-accent:         #FF8A00;
  --color-accent-light:   #FFA633;
  --color-accent-dark:    #CC6E00;

  /* ---- Semantic Colors ---- */
  --color-success:        #16A34A;
  --color-emergency:      #DC2626;

  /* ---- Backgrounds ---- */
  --color-bg:             #F8FAFC;
  --color-bg-white:       #FFFFFF;
  --color-bg-alt:         #F1F5F9;

  /* ---- Text ---- */
  --color-text:           #1E293B;
  --color-text-muted:     #64748B;

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

  /* ---- 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:            6px;
  --radius-md:            12px;
  --radius-lg:            18px;

  /* ---- Shadows ---- */
  --shadow-sm:            0 1px 3px rgba(12, 35, 64, 0.06),
                          0 1px 2px rgba(12, 35, 64, 0.04);
  --shadow-md:            0 4px 12px rgba(12, 35, 64, 0.08),
                          0 2px 6px rgba(12, 35, 64, 0.04);
  --shadow-lg:            0 12px 40px rgba(12, 35, 64, 0.12),
                          0 4px 16px rgba(12, 35, 64, 0.06);
  --shadow-accent:        0 8px 30px rgba(255, 138, 0, 0.25),
                          0 4px 12px rgba(255, 138, 0, 0.15);

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

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