/* ==========================================================================
   CureSearch 2026 — Design tokens
   Source of truth: Figma "CureSearch — New Site"
     - 19 color variables (collection "CureSearch Colors")
     - 23 text styles (Montserrat)
   Every other stylesheet uses these variables. Change a value here and it
   changes everywhere. Elementor's global colors/fonts mirror these names.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/montserrat-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/montserrat-latin-ext-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Colors (Figma variables → CSS custom properties) ---- */
  --cs-brand-purple: #652872;
  --cs-brand-purple-deep: #3D1747;
  --cs-brand-magenta: #BF4CD8;
  --cs-magenta-text: #A238BA; /* magenta for small text: brand magenta is only 4:1 on white, below the 4.5:1 WCAG AA minimum */
  --cs-brand-gold: #FFC91F;
  --cs-neutral-ink: #000000; /* pure black for digital, per the 2026 brand guide */
  --cs-neutral-white: #FFFFFF;
  --cs-text-body: #4F4752;
  --cs-text-muted: #696370; /* was #8C8591; darkened Oct 2026 to pass WCAG AA contrast (5.8:1 on white, 5.2:1 on lavender) */
  --cs-text-on-dark-muted: #D9D1DE;
  --cs-surface-dark: #302B3B;
  --cs-surface-lavender-300: #D4C7DB;
  --cs-surface-lavender-200: #E0D9E5;
  --cs-surface-lavender-50: #F8F1FA;
  --cs-surface-gray-50: #F6F5FA;
  --cs-border-strong: #635E67;
  --cs-border-default: #A6A2AB;
  --cs-border-subtle: #DED4E3;
  --cs-status-success: #146B3B;
  --cs-status-error: #B42318;

  /* Brand gradients — measured from Figma (all run left → right, 90deg) */
  --cs-gradient-brand: linear-gradient(90deg, var(--cs-brand-purple) 0%, var(--cs-brand-magenta) 100%);       /* CTA bands, The Gap, rules */
  --cs-gradient-header: linear-gradient(90deg, var(--cs-brand-purple) 4%, var(--cs-brand-magenta) 88%);       /* site header bar */
  --cs-gradient-wash: linear-gradient(90deg, var(--cs-neutral-white) 0%, var(--cs-surface-lavender-50) 100%); /* page heroes: white → lavender */
  --cs-gradient-text: linear-gradient(90deg, var(--cs-brand-purple) 0%, var(--cs-brand-magenta) 100%);        /* H1 / H2 headings */
  --cs-gradient-text-vertical: linear-gradient(180deg, var(--cs-brand-magenta) 0%, var(--cs-brand-purple) 100%); /* homepage "Join the search" line */

  /* ---- Type ---- */
  --cs-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --cs-w-regular: 400;
  --cs-w-bold: 700;
  --cs-w-xbold: 800;

  /* Text styles: size / line-height / tracking. Sizes step down on small screens. */
  --cs-type-display-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.375rem);   /* 44 → 70 */
  --cs-type-display-lh: 1.03;
  --cs-type-h1-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);          /* 36 → 56 */
  --cs-type-h1-lh: 1.07;
  --cs-type-h2-size: clamp(1.875rem, 1.45rem + 1.3vw, 2.5rem);        /* 30 → 40 */
  --cs-type-h2-lh: 1.15;
  --cs-type-h3-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);       /* 22 → 28 */
  --cs-type-h3-lh: 1.21;
  --cs-type-h4-size: clamp(1.1875rem, 1.13rem + 0.2vw, 1.3125rem);    /* 19 → 21 */
  --cs-type-h4-lh: 1.29;
  --cs-type-h5-size: 1.0625rem;                                        /* 17 */
  --cs-type-h5-lh: 1.35;
  --cs-type-quote-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);    /* 22 → 30 */
  --cs-type-quote-lh: 1.27;
  --cs-type-subhead-size: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);  /* 18 → 20 */
  --cs-type-subhead-lh: 1.4;
  --cs-type-lead-lg-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);  /* 20 → 26 */
  --cs-type-lead-lg-lh: 1.31;
  --cs-type-lead-size: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);     /* 18 → 20 */
  --cs-type-lead-lh: 1.55;
  --cs-type-body-size: 1.0625rem;                                      /* 17 */
  --cs-type-body-lh: 1.59;
  --cs-type-body-strong-size: 1rem;                                    /* 16 */
  --cs-type-body-strong-lh: 1.5;
  --cs-type-small-size: 0.875rem;                                      /* 14 */
  --cs-type-small-lh: 1.57;
  --cs-type-caption-size: 0.75rem;                                     /* 12 */
  --cs-type-caption-lh: 1.5;
  --cs-type-stat-lg-size: clamp(2.5rem, 1.8rem + 2.2vw, 3.5rem);      /* 40 → 56 */
  --cs-type-stat-md-size: clamp(2rem, 1.7rem + 1vw, 2.5rem);          /* 32 → 40 */
  --cs-type-label-lg-size: 1rem;                                       /* 16 */
  --cs-type-eyebrow-size: 0.75rem;                                     /* 12 */
  --cs-type-label-sm-size: 0.625rem;                                   /* 10 */
  --cs-type-link-size: 0.875rem;                                       /* 14 */
  --cs-type-link-sm-size: 0.75rem;                                     /* 12 */
  /* Text links with arrows ("Read more →"). Raised Oct 2026 at CureSearch's request: 12→15 and 14→17. */
  --cs-type-textlink-size: 0.9375rem;                                  /* 15 */
  --cs-type-textlink-lg-size: 1.0625rem;                               /* 17 */
  --cs-type-ui-label-size: 0.8125rem;                                  /* 13 */

  --cs-track-display: -0.03em;
  --cs-track-h3: -0.01em;
  --cs-track-stat: -0.02em;
  --cs-track-label: 0.1em;
  --cs-track-label-lg: 0.05em;

  /* ---- Layout ---- */
  --cs-container: 1200px;                 /* the 120px margin at 1440 */
  --cs-gutter: clamp(20px, 4vw, 40px);     /* page side margin on smaller screens */
  --cs-grid-gap: clamp(20px, 2.5vw, 40px);
  --cs-section-pad: clamp(56px, 7vw, 96px);
  --cs-section-pad-tight: clamp(40px, 5vw, 64px);
  --cs-measure: 46rem;                    /* comfortable reading width (~736px) */

  /* Boxes: the one rule for text inside any visible box.
     Text never sits closer than this to the edge of a card, panel or band. */
  --cs-box-pad: clamp(24px, 2.6vw, 36px);
  --cs-box-pad-sm: clamp(20px, 2vw, 24px);

  /* ---- Surfaces ---- */
  --cs-radius-pill: 999px;
  --cs-radius-sm: 4px;
  --cs-shadow-soft: 0 0 32px rgba(0, 0, 0, 0.08);
  --cs-header-h: 100px;
  --cs-focus: 0 0 0 3px var(--cs-neutral-white), 0 0 0 6px var(--cs-brand-purple);

  /* ---- Motion ---- */
  --cs-ease: cubic-bezier(.2, .7, .2, 1);
  --cs-dur: 180ms;
}

@media (max-width: 1080px) {
  :root { --cs-header-h: 76px; }
}