/* =========================================================
   BizIQ Data — Design Tokens
   Single source of truth for the whole site.
   Enqueued FIRST so every other stylesheet can use it.
   Do not hard-code colors, radii, or spacing elsewhere.
   ========================================================= */

:root {

  /* ---- Brand blues ---- */
  --color-primary:        #1E88E5;  /* base brand blue */
  --color-primary-dark:   #1565C0;  /* button hover / active */
  --color-primary-darker: #0D3B78;  /* gradient end, deep accents */
  --color-primary-light:  #E3F2FD;  /* icon tiles, soft fills */
  --color-primary-subtle: #F0F7FF;  /* faint tint for alt sections */

  /* ---- Dark surfaces ---- */
  --color-dark:           #1A1A1A;  /* base dark */
  --color-dark-section:   #0E1F3A;  /* navy trust band + footer */

  /* ---- Text ---- */
  --color-heading:        #1A1A1A;
  --color-text:           #334155;
  --color-text-muted:     #64748B;
  --color-text-invert:    #FFFFFF;
  --color-text-invert-muted: #AEBED6;

  /* ---- Surfaces + borders ---- */
  --color-background:     #FFFFFF;
  --color-background-alt: #F8FAFC;
  --color-card:           #FFFFFF;
  --color-border:         #E2E8F0;
  --color-border-strong:  #CBD5E1;

  /* ---- Optional high-contrast CTA accent (unused by default) ----
     To switch every CTA to coral, set --btn-bg below to var(--color-accent). */
  --color-accent:         #FF6B6B;
  --color-accent-dark:    #E85555;

  /* ---- Feedback ---- */
  --color-success:        #16A34A;
  --color-error:          #DC2626;
  --color-warning:        #F59E0B;

  /* ---- Primary button mapping (change once to re-skin all CTAs) ---- */
  --btn-bg:        var(--color-primary);
  --btn-bg-hover:  var(--color-primary-dark);
  --btn-fg:        #FFFFFF;

  /* ---- Radii ---- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);

  /* ---- Layout ---- */
  --container-width:  1450px;
  --container-narrow: 820px;
  --gutter: 28px;

  /* ---- Section spacing ---- */
  --section-spacing:        96px;
  --section-spacing-mobile: 56px;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* ---- Typography ---- */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: var(--font-body);

  --text-xs:   0.8125rem;   /* 13px eyebrows / labels */
  --text-sm:   0.9375rem;   /* 15px small */
  --text-base: 1.0625rem;   /* 17px body */
  --text-lg:   1.25rem;     /* 20px lead */
  --text-h4:   1.0625rem;   /* card titles */
  --text-h3:   1.375rem;
  --text-h2:   clamp(1.75rem, 3vw, 2.375rem);   /* section titles */
  --text-h1:   clamp(2.25rem, 5vw, 3.375rem);   /* hero */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;

  --tracking-wide:  0.06em;   /* uppercase headings */
  --tracking-label: 0.14em;   /* eyebrows */

  /* ---- Motion ---- */
  --transition: 160ms ease;
}