/* ============================================================
   PECB Conference 2026 — Design Tokens
   Paste into: Elementor → Site Settings → Custom CSS
   Extracted from the delivered HTML design system.
   ============================================================ */

:root {
  /* ---- Core brand ---- */
  --pecb-blue:            #2540D8;  /* primary action blue */
  --pecb-blue-deep:       #1C2DB5;
  --pecb-blue-dark:       #1A2BA8;
  --pecb-blue-navy:       #14207A;
  --pecb-blue-bright:     #4460FF;
  --pecb-blue-mid:        #152394;
  --pecb-blue-ink:        #0E1A68;
  --pecb-blue-abyss:      #080E42;

  --pecb-red:             #D40B22;  /* accent / urgency */
  --pecb-red-alt:         #E00B22;
  --pecb-red-deep:        #BB0812;
  --pecb-red-soft:        #FF5663;
  --pecb-plum:            #3A0A2A;  /* gradient midpoint only */

  /* ---- Surfaces (dark theme) ---- */
  --pecb-bg:              #04040A;  /* page background */
  --pecb-surface-1:       #0A0A16;
  --pecb-surface-2:       #0B0A1E;
  --pecb-surface-3:       #0D0F1C;  /* card default */
  --pecb-surface-4:       #0F1430;
  --pecb-surface-5:       #11142A;  /* card hover */
  --pecb-surface-black:   #06060D;

  /* ---- Text ---- */
  --pecb-text:            #FFFFFF;
  --pecb-text-body:       #9AA3C4;  /* default paragraph */
  --pecb-text-strong:     #C7CCDB;  /* nav links, emphasis body */
  --pecb-text-muted:      #7A8099;  /* captions, meta */
  --pecb-text-dim:        #5A5E72;
  --pecb-link-light:      #8BA0FF;  /* kickers, inline accents */
  --pecb-link-hover:      #A9BAFF;
  --pecb-link-nav:        #7D93FF;

  /* ---- Light sections ----
     The site alternates dark and light. These cover:
     Home §04 §09 §11 · About §03 §05 §07 · Course §03 §04 §06 §07 */
  --pecb-light-bg:        #FFFFFF;
  --pecb-light-bg-alt:    #F5F6FA;  /* FAQ */
  --pecb-light-bg-warm:   #EEF1F6;  /* testimonials */
  --pecb-light-bg-blue:   #F1F8FF;  /* course benefits / what-to-expect */
  --pecb-light-card:      #F7F8FB;  /* highlight cards */
  --pecb-light-card-alt:  #F4F5FB;  /* employer box, trainer card */
  --pecb-light-chip:      #E7EAFF;  /* trainer highlight chips */
  --pecb-light-border:    rgba(10,10,22,0.08);
  --pecb-light-rule:      #E4E7F2;

  --pecb-ink:             #0A0A16;  /* headings on light */
  --pecb-ink-deep:        #0F1430;  /* venue / benefits headings */
  --pecb-ink-soft:        #4A5169;  /* body on light */
  --pecb-ink-muted:       #5A5E72;  /* captions on light — OK here, FAILS on dark */
  --pecb-ink-slate:       #3A4056;  /* course overview body */
  --pecb-ink-navy:        #1B2450;  /* what-to-expect list */

  /* ---- Borders & hairlines ---- */
  --pecb-border:          rgba(255,255,255,0.08);   /* default */
  --pecb-border-strong:   rgba(255,255,255,0.12);
  --pecb-border-soft:     rgba(255,255,255,0.06);
  --pecb-border-hover:    rgba(150,180,255,0.50);
  --pecb-border-glow:     rgba(120,150,255,0.30);

  /* ---- Signature gradients ---- */
  /* THE brand gradient — buy buttons, primary CTAs. Used 25× in the design. */
  --pecb-grad-cta: linear-gradient(40deg,
                     #D40B22 0%,
                     #3A0A2A 27%,
                     #0B0A1E 50%,
                     #14207A 73%,
                     #1C2DB5 100%);
  --pecb-grad-blue:      linear-gradient(120deg,#1A2BA8 0%,#2540D8 55%,#4460FF 100%);
  --pecb-grad-blue-flat: linear-gradient(90deg,#1A2BA8,#2540D8);
  --pecb-grad-panel:     linear-gradient(125deg,#0E1A68 0%,#152394 55%,#1C31C4 100%);
  --pecb-grad-panel-dk:  linear-gradient(125deg,#080E42 0%,#0E1A68 50%,#152394 100%);
  --pecb-grad-rule:      linear-gradient(90deg,#1C2DB5 0%,#2540D8 42%,#D40B22 100%);

  /* Ambient section glows — apply as ::before overlays on dark sections */
  --pecb-glow-top:   radial-gradient(85% 65% at 50% -6%,
                       rgba(46,68,240,0.42) 0%,
                       rgba(28,45,181,0.16) 34%,
                       transparent 62%);
  --pecb-glow-corner: radial-gradient(70% 65% at 102% 104%,
                       rgba(224,11,34,0.36) 0%,
                       rgba(187,8,18,0.14) 38%,
                       transparent 64%);

  /* ---- Layout ---- */
  --pecb-container:       1240px;
  --pecb-gutter:          24px;
  --pecb-gutter-mobile:   18px;
  --pecb-section-y:       104px;   /* desktop section padding-block */
  --pecb-section-y-md:    80px;
  --pecb-section-y-sm:    60px;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---- Radii ---- */
  --r-pill:   100px;   /* buttons, chips, badges */
  --r-lg:     20px;
  --r-md:     14px;    /* dropdowns, large cards */
  --r-card:   12px;    /* default card */
  --r-sm:     9px;
  --r-xs:     2px;

  /* ---- Elevation ---- */
  --sh-drop:   0 30px 60px -24px rgba(0,0,0,0.80);
  --sh-card:   0 4px 16px rgba(10,10,22,0.08);
  --sh-lift:   0 18px 40px -18px rgba(37,64,216,0.60);

  /* ---- Motion ---- */
  --t-fast:  .18s ease;
  --t-base:  .22s ease;
  --t-slow:  .25s ease;
  --t-slide: 780ms cubic-bezier(.65,0,.35,1);
}

/* ============================================================
   Base overrides
   ============================================================ */

body {
  background: var(--pecb-bg);
  color: var(--pecb-text);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Reusable utility classes
   Add via Elementor: Advanced → CSS Classes
   ============================================================ */

/* Primary CTA — the signature 5-stop gradient pill */
.pecb-cta {
  background: var(--pecb-grad-cta) !important;
  color: #fff !important;
  font-weight: 700;
  border: none !important;
  border-radius: var(--r-pill) !important;
  transition: transform var(--t-fast);
}
.pecb-cta:hover { transform: translateY(-2px); color: #fff !important; }

/* Secondary / ghost button */
.pecb-btn-ghost {
  background: transparent !important;
  color: var(--pecb-text) !important;
  border: 1px solid var(--pecb-border-strong) !important;
  border-radius: var(--r-pill) !important;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pecb-btn-ghost:hover {
  border-color: var(--pecb-border-hover) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Standard dark card */
.pecb-card {
  background: var(--pecb-surface-3);
  border: 1px solid var(--pecb-border);
  border-radius: var(--r-md);
  transition: transform var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.pecb-card:hover {
  transform: translateY(-2px);
  border-color: var(--pecb-border-hover);
  background: var(--pecb-surface-5);
}

/* Light section — flips text colours.
   Add as a CSS class on any container whose background is light. */
.pecb-light { color: var(--pecb-ink); }
.pecb-light h1, .pecb-light h2,
.pecb-light h3, .pecb-light h4 { color: var(--pecb-ink); }
.pecb-light p                  { color: var(--pecb-ink-soft); }
.pecb-light .pecb-kicker       { color: var(--pecb-blue); }
.pecb-light .pecb-card {
  background: var(--pecb-light-card);
  border-color: var(--pecb-light-border);
  box-shadow: 0 24px 60px -34px rgba(15,31,196,0.35);
}
.pecb-light .pecb-card:hover { border-color: rgba(37,64,216,0.35); }

/* Section eyebrow / kicker label */
.pecb-kicker {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pecb-link-light);
  font-weight: 600;
}

/* Ambient glow on a section container (set container to position: relative) */
.pecb-glow { position: absolute !important; isolation: isolate; }
.pecb-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pecb-glow-top);
  pointer-events: none;
  z-index: -1;
}
.pecb-glow--corner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pecb-glow-corner);
  pointer-events: none;
  z-index: -1;
}

/* Gradient text (headline highlights) */
.pecb-grad-text {
  background: var(--pecb-grad-blue);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Mode chips used in the agenda */
.pecb-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--pecb-border-strong);
  color: var(--pecb-text-strong);
}
.pecb-chip--online   { border-color: rgba(120,150,255,0.50); color: var(--pecb-link-light); }
.pecb-chip--inperson { border-color: rgba(255,86,99,0.50);   color: var(--pecb-red-soft); }

/* ============================================================
   Fluid type ramp — replaces most per-breakpoint size overrides
   ============================================================ */

.pecb-h-display { font-size: clamp(52px, 9vw, 112px); font-weight: 800; letter-spacing: -2px; line-height: 0.95; }
.pecb-h1        { font-size: clamp(40px, 5.5vw, 64px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.05; }
.pecb-h2        { font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; letter-spacing: -1px;   line-height: 1.12; }
.pecb-h3        { font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; }
.pecb-h4        { font-size: clamp(18px, 2vw, 22px);   font-weight: 700; line-height: 1.3; }
.pecb-lead      { font-size: clamp(15px, 1.4vw, 18px); font-weight: 400; line-height: 1.65; color: var(--pecb-text-body); }
.pecb-body      { font-size: 15px; line-height: 1.65; color: var(--pecb-text-body); }
.pecb-small     { font-size: 13px; line-height: 1.5;  color: var(--pecb-text-muted); }

/* ============================================================
   Accessibility & polish
   ============================================================ */

html { scroll-behavior: smooth; }

*:focus-visible {
  outline: 2px solid var(--pecb-link-light);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--pecb-blue); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Breakpoint reference (match in Site Settings → Layout)
   Tablet : 1024px
   Mobile : 560px
   ============================================================ */

@media (max-width: 1024px) {
  :root { --pecb-section-y: var(--pecb-section-y-md); }
}
@media (max-width: 560px) {
  :root {
    --pecb-section-y: var(--pecb-section-y-sm);
    --pecb-gutter: var(--pecb-gutter-mobile);
  }
}