/* Design tokens — every value sampled from logo.png. See WEBSITE/BRAND.md */
:root{
  --col-cream:#F0E7D2;        /* page base */
  --col-band:#EADFC6;         /* same warm family, one step deeper */
  /* Purple SURFACES, lightened 40% from the original blocks. Kept separate
     from --col-heading: lightening the text colour too would drop 16px bold
     titles on cream to 4.11 and fail contrast. */
  --col-surface-head:#735EC7; /* header */
  --col-ink:#5E46BF;          /* accent block mid-page */
  --col-ink-deep:#513BA8;     /* footer, closes the page */
  --col-white:#FFFFFF;
  --col-border:#E3D8C0;

  --col-heading:#4A369B;
  --col-text:#463F5C;
  --col-muted:#635B7A;

  --col-accent:#F2477F;          /* buttons and large type */
  /* Hover must DARKEN a pink that already carries white text. #D93A6E left the
     label at 4.39:1 - the button got harder to read as the pointer landed. */
  --col-accent-hover:#AB2953;
  --col-accent-text:#C93062;     /* small accent text - the bright pink only reaches 3.1:1 */
  /* Pink as a SURFACE under white text. --col-accent is the brand pink and is
     only legible as large display type: white on it measures 3.51:1, so every
     primary button and the Mon carnet pill were failing AA. These two are the
     same hue doing different jobs and must not be swapped for each other. */
  --col-accent-solid:#C93062;
  --col-accent-deep:#B02951;     /* small bold accent text on a pale pink tint */
  /* Muted text on the deep purple footer. rgba white at .55 measured 3.69:1. */
  --col-on-deep-muted:#CFC8EA;
  --col-on-ink-muted:#E0DBF5;    /* same job on the mid purple banner */

  /* pill system — badges and category tags ONLY */
  --pill-green:#3FB94F;
  --pill-yellow:#F5C518;
  --pill-pink:#F2477F;
  --pill-purple:#7A5CD0;
  --pill-blue:#3B8BD6;

  --radius-card:18px;
  --radius-pill:999px;
  --shadow-card:0 2px 12px rgba(74,54,155,.09);
  --shadow-lift:0 16px 32px rgba(74,54,155,.18);
  /* Deep lift for full-width feature cards. Two tints, same geometry: a shadow
     belongs to the surface it falls on, so a card on the cream page gets the
     cool one and a card on the tan band gets the warm one. rgb(120,98,52) is
     --col-band's own hue (~41deg) taken down to a shadow value. */
  --shadow-raised:0 18px 40px rgba(81,59,168,.26);
  --shadow-raised-warm:0 18px 40px rgba(120,98,52,.26);
  --ease:cubic-bezier(.22,.61,.36,1);

  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-body:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html{-webkit-text-size-adjust:100%}

/* Hello Elementor sets antialiased smoothing, which renders noticeably
   thinner on macOS. Back to the default so body copy keeps its weight. */
body,body *{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
body{
  background:var(--col-cream);
  color:var(--col-text);
  font-family:var(--font-body);
  font-size:1.02rem;
  line-height:1.65;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--col-heading);
  line-height:1.14;
  font-weight:700;
  letter-spacing:-.005em;
  font-variation-settings:"SOFT" 40,"WONK" 1;
}

/* accent phrase inside a two-tone headline */
/* Large display type only. The brand pink on cream is 2.85:1, under the 3:1
   that even large text needs, so the accent word in a headline uses the
   darker tone. */
.c-accent{color:var(--col-accent-text)}

/* pill badge */
.c-pill{
  display:inline-flex;align-items:center;gap:.45em;
  padding:.3em .8em;border-radius:var(--radius-pill);
  font-size:.8rem;font-weight:600;line-height:1.4;
  background:color-mix(in srgb,var(--pill,var(--pill-green)) 14%,#fff);
  /* 72% left the two lightest pills under AA on their own tint: measured
     green 4.09:1 and yellow 2.91:1 at 11.5px, where 4.5 is required. 52%
     clears every pill with headroom - yellow, the worst, lands at 5.4. */
  color:color-mix(in srgb,var(--pill,var(--pill-green)) 52%,#000);
}
.c-pill::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--pill,var(--pill-green))}

/* respect users who ask for less motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}