/*
 * Design tokens for custom header/footer
 * Hardcoded values — P&C theme pulls these from theme.json,
 * but Elementor site doesn't have that, so we define them here.
 */

:root {
  /* ── Colors ── */
  --color-navy:         #26265F;
  --color-primary:      #2380E5;
  --color-primary-dark: #1B6AC0;
  --color-accent:       #FFDB38;
  --color-success:      #02BC7F;
  --color-black:        #040404;
  --color-white:        #FFFFFF;
  --color-text-body:    #1A1A1A;
  --color-text-dark:    #040404;
  --color-border-light: #E9E9E9;
  --color-divider:      #E9E9E9;

  /* ── Typography ── */
  --font-heading: 'Rubik', sans-serif;
  --font-body:    'Roboto Slab', serif;

  /* ── Spacing ── */
  --space-none: 0;
  --space-4xs:  4px;
  --space-3xs:  8px;
  --space-2xs:  12px;
  --space-xs:   16px;
  --space-sm:   24px;
  --space-md:   32px;
  --space-lg:   40px;
  --space-xl:   72px;
  --space-2xl:  120px;
  --space-48:   48px;
  --space-64:   64px;
  --space-80:   80px;
  --space-100:  100px;

  /* ── Border radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill:  999px;

  /* ── Layout ── */
  --max-width: 1200px;
}

/* ── Responsive spacing ── */
@media (max-width: 1024px) {
  :root {
    --space-2xl:  80px;
    --space-100:  64px;
    --space-xl:   48px;
    --space-80:   60px;
    --space-64:   48px;
    --space-48:   40px;
    --space-lg:   32px;
    --space-md:   24px;
  }
}

@media (max-width: 768px) {
  :root {
    --space-2xl:  60px;
    --space-100:  48px;
    --space-xl:   40px;
    --space-80:   48px;
    --space-64:   40px;
    --space-48:   32px;
    --space-lg:   24px;
    --space-md:   20px;
  }
}