/* ==========================================================================
   theme.css — colour tokens & section themes (matches the Binfo logo)
   Colours can be changed from  Site Settings → Brand Colours
   ========================================================================== */
:root {
  /* Brand palette */
  --b-navy:   #0B1730;   /* midnight navy — logo background */
  --b-navy-2: #0F2144;
  --b-navy-3: #14305F;
  --b-blue:   #087CF0;   /* electric blue — logo nodes */
  --b-blue-d: #0663C4;
  --b-cyan:   #67E8F9;   /* AI cyan glow */
  --b-white:  #F8FAFC;
  --b-silver: #C9D6EA;   /* metallic lettering */
  --b-ink:    #0F1B33;
  --b-muted:  #56668A;
  --b-muted-dark: #9FB2D0;
  --b-line:   rgba(15, 27, 51, .10);
  --b-line-dark: rgba(103, 232, 249, .16);

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #087CF0 0%, #2AA8F5 55%, #67E8F9 100%);
  --grad-text:    linear-gradient(90deg, #4FB4FF 0%, #67E8F9 100%);
  --grad-hero:    radial-gradient(1200px 600px at 80% -10%, #14305F 0%, transparent 60%), linear-gradient(180deg, #0B1730 0%, #09122A 100%);

  /* Typography (Google Fonts) */
  --font-head: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shape & depth */
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 12px rgba(11, 23, 48, .06);
  --shadow:    0 14px 40px rgba(11, 23, 48, .10);
  --shadow-lg: 0 30px 70px rgba(11, 23, 48, .18);
  --glow:      0 0 0 1px rgba(103,232,249,.25), 0 18px 50px rgba(8,124,240,.35);

  --header-h: 84px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Bootstrap overrides */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--b-ink);
  --bs-body-bg: var(--b-white);
  --bs-primary: var(--b-blue);
  --bs-primary-rgb: 8, 124, 240;
  --bs-link-color: var(--b-blue);
  --bs-link-hover-color: var(--b-blue-d);
  --bs-border-radius: var(--radius-sm);
}

/* ---- Section themes: sections pick one, children inherit the variables ---- */
.theme-light {
  --sec-bg: var(--b-white);
  --sec-text: var(--b-ink);
  --sec-muted: var(--b-muted);
  --sec-head: var(--b-navy);
  --card-bg: #fff;
  --card-border: var(--b-line);
  --card-shadow: var(--shadow-sm);
}
.theme-alt {
  --sec-bg: #EAF1FB;
  --sec-text: var(--b-ink);
  --sec-muted: var(--b-muted);
  --sec-head: var(--b-navy);
  --card-bg: #fff;
  --card-border: rgba(8, 124, 240, .12);
  --card-shadow: var(--shadow-sm);
}
.theme-dark {
  --sec-bg: var(--b-navy);
  --sec-text: #E6EEFB;
  --sec-muted: var(--b-muted-dark);
  --sec-head: #fff;
  --card-bg: rgba(255, 255, 255, .045);
  --card-border: var(--b-line-dark);
  --card-shadow: none;
}