/* ==========================================================================
   DESIGN TOKENS — Garage Door Repairs Plumpton (From Scratch)
   variables.css
   ========================================================================== */

/* Google Fonts
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* Root Design Tokens
   ========================================================================== */
:root {

  /* ---- Brand Colors ---- */
  --color-primary:        #0e4a36;
  --color-primary-light:  #1c684e;
  --color-primary-dark:   #072116;
  --color-accent:         #c5a059;
  --color-accent-light:   #e6c687;
  --color-accent-dark:    #9b7a3e;

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

  /* ---- Backgrounds (Warm Alabaster & Sand) ---- */
  --color-bg:             #FAF9F5;
  --color-bg-white:       #FFFFFF;
  --color-bg-alt:         #F3F1E9;

  /* ---- Text ---- */
  --color-text:           #1f2824;
  --color-text-muted:     #57645f;

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

  /* ---- Typography ---- */
  --font-headings:        'Outfit', sans-serif;
  --font-body:            'Plus Jakarta Sans', 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:            8px;
  --radius-md:            14px;
  --radius-lg:            22px;

  /* ---- Shadows ---- */
  --shadow-sm:            0 2px 4px rgba(7, 33, 22, 0.04);
  --shadow-md:            0 8px 18px rgba(7, 33, 22, 0.06), 0 2px 6px rgba(7, 33, 22, 0.03);
  --shadow-lg:            0 16px 48px rgba(7, 33, 22, 0.1), 0 6px 16px rgba(7, 33, 22, 0.04);
  --shadow-accent:        0 10px 25px rgba(197, 160, 89, 0.2), 0 4px 10px rgba(197, 160, 89, 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.45s cubic-bezier(0.16, 1, 0.3, 1);

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