/* =====================================================================
   Preuve by Formation, magenta theme layer
   ---------------------------------------------------------------------
   Loads AFTER formation.css. Reuses the ENTIRE Formation design system
   (layout, components, typography, spacing) and only changes the colour
   language to magenta so Preuve reads as a distinct Formation Technology
   Group brand.

   Everything is scoped to `body.preuve-theme`, so this file can never
   affect the rest of the Formation Technology website.
   ===================================================================== */

body.preuve-theme {
  /* Dark base: deep aubergine / plum instead of navy */
  --color-navy:      #2b0a33;   /* heroes, footer, on-dark surfaces */
  --color-navy-900:  #1c0521;   /* near-black plum */
  --color-navy-700:  #431a4d;   /* raised plum surface (cards on dark) */
  --color-charcoal:  #1a0a1e;

  /* Magenta family accents (take over the blue / cyan / teal roles) */
  --color-blue:      #b3126b;   /* primary: buttons, links (6.5:1 on white) */
  --color-blue-600:  #950f59;   /* primary hover */
  --color-cyan:      #ec4899;   /* bright accent (was brand cyan) */
  --color-cyan-200:  #f9a8d4;   /* light pink tint */
  --color-teal:      #a21caf;   /* tertiary / success ticks (was teal) */
  --color-teal-600:  #86198f;   /* eyebrow / proof text (8:1 on white) */

  /* Neutrals: subtly warmed toward magenta */
  --color-light:     #faf5f9;   /* off-white with a faint pink cast */
  --color-light-2:   #f4ebf3;   /* slightly deeper panel */
  --color-ink:       #241722;   /* primary body text (warm near-black) */
  --color-muted:     #6b5566;   /* secondary text (6.7:1 on white) */
  --color-border:    #ecdbe8;   /* hairline borders */

  /* Text on dark */
  --on-dark:         #fbeef7;
  --on-dark-muted:   #d9b8d0;

  /* Shadows retinted to plum */
  --shadow-soft:   0 6px 24px rgba(43, 10, 51, 0.09), 0 2px 6px rgba(43, 10, 51, 0.06);
  --shadow-strong: 0 24px 60px rgba(43, 10, 51, 0.22), 0 8px 20px rgba(43, 10, 51, 0.12);
  --shadow-glow:   0 0 0 1px rgba(236, 72, 153, 0.35), 0 18px 50px rgba(236, 72, 153, 0.20);
}

/* ---------------------------------------------------------------------
   Overrides for rules in formation.css that use hard-coded cyan / blue /
   teal rgba literals (design tokens alone cannot reach these). Remapped:
     cyan  64,176,208  ->  ec4899  236, 72,153   (hot pink)
     blue  21, 94,156  ->  b3126b  179, 18,107   (berry)
     teal  15,162,140  ->  a21caf  162, 28,175   (fuchsia)
   --------------------------------------------------------------------- */

/* Header: plum glass instead of navy glass */
body.preuve-theme .site-header { background: rgba(28, 5, 33, 0.92); }

/* Hero + inner-page hero glows */
body.preuve-theme .hero {
  background:
    radial-gradient(1100px 540px at 78% -10%, rgba(236, 72, 153, 0.24), transparent 60%),
    radial-gradient(800px 500px at 12% 110%, rgba(179, 18, 107, 0.34), transparent 60%),
    linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-900) 100%);
}
body.preuve-theme .page-hero::before {
  background:
    radial-gradient(700px 360px at 85% -20%, rgba(236, 72, 153, 0.22), transparent 60%),
    radial-gradient(600px 320px at 5% 120%, rgba(179, 18, 107, 0.30), transparent 60%);
}

/* Icon chips / feature / offer icon tiles */
body.preuve-theme .icon-chip        { background: linear-gradient(150deg, rgba(236, 72, 153, 0.16), rgba(179, 18, 107, 0.12)); }
body.preuve-theme .icon-chip--teal  { background: linear-gradient(150deg, rgba(162, 28, 175, 0.16), rgba(236, 72, 153, 0.10)); }
body.preuve-theme .feature__icon           { background: rgba(236, 72, 153, 0.14); }
body.preuve-theme .on-dark .feature__icon  { background: rgba(236, 72, 153, 0.20); }
body.preuve-theme .offer__icon             { background: linear-gradient(150deg, rgba(236, 72, 153, 0.16), rgba(179, 18, 107, 0.12)); }
body.preuve-theme .on-dark .offer__icon    { background: rgba(236, 72, 153, 0.20); }

/* Pills */
body.preuve-theme .pill--cyan { background: rgba(236, 72, 153, 0.14); color: var(--color-blue-600); }
body.preuve-theme .pill--teal { background: rgba(162, 28, 175, 0.14); color: var(--color-teal-600); }

/* Approach stepper number badge */
body.preuve-theme .step .step-num {
  background: linear-gradient(150deg, var(--color-blue), var(--color-cyan));
  box-shadow: 0 8px 18px rgba(179, 18, 107, 0.30);
}

/* Proof / evidence badge */
body.preuve-theme .proof-badge { background: rgba(162, 28, 175, 0.12); color: var(--color-teal-600); }

/* Callout band */
body.preuve-theme .callout {
  background: linear-gradient(120deg, rgba(236, 72, 153, 0.10), rgba(162, 28, 175, 0.08));
  border-left-color: var(--color-teal);
}

/* CTA band */
body.preuve-theme .cta-band {
  background:
    radial-gradient(700px 300px at 50% -40%, rgba(236, 72, 153, 0.30), transparent 70%),
    linear-gradient(120deg, var(--color-blue-600), var(--color-navy) 70%);
}

/* Form field focus ring (defensive, in case any inputs are added) */
body.preuve-theme .field input:focus,
body.preuve-theme .field select:focus,
body.preuve-theme .field textarea:focus {
  border-color: var(--color-cyan);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.20);
}

/* Timeline dots (defensive, if a roadmap timeline is added later) */
body.preuve-theme .tl-item::before          { box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.15); }
body.preuve-theme .tl-item--security::before { box-shadow: 0 0 0 4px rgba(162, 28, 175, 0.18); }

/* Gap-section problem cards: size the inline heading icon. formation.css sizes
   the .icon-chip / .feature__icon / .trust-badge icons but not this bare svg,
   so without this it defaults to filling the card. Small pink accent above the title. */
body.preuve-theme .problem-card h3 svg {
  width: 26px;
  height: 26px;
  display: block;
  margin-bottom: 0.7rem;
  color: var(--color-cyan);
}

/* =====================================================================
   Preuve wordmark: text lockup that replaces the Formation image logo
   in the header and footer (no separate image asset required).
   ===================================================================== */
.preuve-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.05;
  text-decoration: none;
}
.preuve-logo {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: #f2a6cd;                                   /* fallback if clip unsupported */
  background: linear-gradient(90deg, #f7a8d0, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.preuve-logo__dot { color: #ec4899; -webkit-text-fill-color: #ec4899; }
.preuve-logo__by {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-top: 3px;
}
.preuve-brand:hover .preuve-logo__by { color: var(--color-cyan-200); }
.footer-brand .preuve-logo { font-size: 1.7rem; }