/* ==========================================================================
   MG Transportation & Hauling -- Brand Tokens
   Pulled from mg-transportation-hauling-brand-kit.json
   Reference these vars everywhere instead of hardcoding hex/fonts.
   ========================================================================== */

:root {

  /* ---- Brand Colors ---- */
  --mg-color-primary:    #E52C1F; /* red -- CTAs, buttons, badges, hover states */
  --mg-color-secondary:  #0C0039; /* dark navy -- headings */
  --mg-color-tertiary:   #DEEAEC; /* light blue -- section/panel backgrounds */
  --mg-color-accent:     #1E3344; /* dark slate -- body text, contrast */

  /* Neutrals (supplement the 4 brand colors -- adjust if the client supplies exact values) */
  --mg-color-white:      #FFFFFF;
  --mg-color-black:      #1A1A1A;
  --mg-color-gray-light: #D8DFE2; /* borders, dividers -- matches live FAQ page border color */
  --mg-color-gray-mid:   #555555; /* secondary/muted text */

  /* Semantic aliases -- use these in component CSS so a future rebrand
     only requires editing the block above, not every component file. */
  --mg-color-cta-bg:        var(--mg-color-primary);
  --mg-color-cta-bg-hover:  var(--mg-color-secondary);
  --mg-color-cta-text:      var(--mg-color-white);
  --mg-color-heading:       var(--mg-color-secondary);
  --mg-color-body-text:     var(--mg-color-accent);
  --mg-color-panel-bg:      var(--mg-color-tertiary);
  --mg-color-border:        var(--mg-color-gray-light);

  /* ---- Typography ---- */
  --mg-font-primary:   'Poppins', system-ui, sans-serif; /* headings */
  --mg-font-secondary: 'Poppins', system-ui, sans-serif; /* body */

  --mg-font-weight-regular:  400;
  --mg-font-weight-semibold: 600;
  --mg-font-weight-bold:     700;

  --mg-font-size-base:  1rem;      /* 16px */
  --mg-font-size-sm:    0.875rem;  /* 14px */
  --mg-font-size-lg:    1.125rem;  /* 18px */
  --mg-font-size-xl:    1.5rem;    /* 24px */
  --mg-font-size-2xl:   2rem;      /* 32px */
  --mg-font-size-3xl:   2.5rem;    /* 40px */

  --mg-line-height-tight:  1.2;
  --mg-line-height-base:   1.6;
  --mg-line-height-loose:  1.7;

  /* ---- Spacing Scale ---- */
  --mg-space-xs:   8px;
  --mg-space-sm:   12px;
  --mg-space-md:   20px;
  --mg-space-lg:   32px;
  --mg-space-xl:   48px;
  --mg-space-2xl:  64px;
  --mg-space-3xl:  96px;

  /* ---- Layout ---- */
  --mg-container-max:  1200px;
  --mg-container-pad:  20px;
  --mg-radius-sm:      6px;
  --mg-radius-md:      8px;
  --mg-radius-pill:    20px;

  /* ---- Effects ---- */
  --mg-overlay-opacity: 0.55;   /* from brand kit -- used on hero image overlays */
  --mg-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); /* from brand kit text_shadow: true */
  --mg-shadow-sm:  0 2px 10px rgba(0, 0, 0, 0.08);
  --mg-shadow-hover: 0 2px 10px rgba(229, 44, 31, 0.12); /* matches live FAQ hover shadow, tinted with primary */

  /* ---- Transitions ---- */
  --mg-transition-fast: 0.2s ease;
  --mg-transition-base: 0.35s ease;
}