/* ============================================================
   ROOT — SHARED DESIGN TOKENS & WEB FONTS
   Load this file BEFORE style.css and before any page-specific
   stylesheet. Every value below was already present, identical,
   in one or more of the individual stylesheets — this file only
   centralizes them so they are declared once instead of being
   repeated (or hard-coded) in every page's CSS file.
   Nothing here changes any visual output.
============================================================ */

@font-face {
  font-family: HelveticaL;
  src: url(../fonts/helvetica-neue-5/HelveticaNeueLight.otf);
}

@font-face {
  font-family: Helvetica;
  src: url(../fonts/helvetica-neue-5/HelveticaNeueMedium.otf);
}

@font-face {
  font-family: HelveticaHeavy;
  src: url(../fonts/helvetica-neue-5/HelveticaNeueHeavy.otf);
}

@font-face {
  font-family: HelveticaBold;
  src: url(../fonts/helvetica-neue-5/HelveticaNeueBold.otf);
}

@font-face {
  font-family: HelveticaLight;
  src: url(../fonts/helvetica-neue-5/HelveticaNeueLight.otf);
}

:root {
  /* ── brand palette (unchanged values, now shared) ── */
  --black: #1B1B1E;
  --white: #ffffff;
  --green: #ACDB55;
  --green-alt: #ADDC55;
  --green-bright: #b8ff47;
  --blue: #0337BC;
  --cream: #D8D5C7;

  /* ── aliases kept for existing usage ── */
  --nav-bg: var(--green-bright);
  --nav-text: var(--blue);

  /* ── recurring gradient stops ── */
  --hero-grad-start: #D2F670;
  --hero-grad-end: #193AD3;
  --dark-1: #111;

  /* ── shared multi-stop mesh background (used as-is in several
       card/section backgrounds across case-study.css and
       services-details.css) ── */
  --mesh-gradient:
    radial-gradient(ellipse at 0% 0%, #cffc5b 0%, #cffc5b 30%, transparent 55%),
    radial-gradient(ellipse at 0% 50%, #cffc5b 0%, #c2e870 25%, transparent 62%),
    radial-gradient(ellipse at 50% 0%, #c2e870 0%, #d4f090 30%, transparent 55%),
    radial-gradient(ellipse at 100% 0%, #ffffff 0%, #f8fff0 20%, transparent 40%),
    radial-gradient(ellipse at 100% 100%, #1a1aee 6%, #b9ff47 65%),
    radial-gradient(ellipse at 50% 50%, #b8e890 0%, transparent 60%);

  /* ── layout / spacing / type scale (moved as-is from style.css) ── */
  --pill: 999px;
  --ease: 0.25s ease;
  --navbar-h: 76px;
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 40px;
  --sp-xl: 60px;
  --sp-2xl: 80px;
  --sp-3xl: 120px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: clamp(22px, 3vw, 36px);
  --fs-xl: clamp(28px, 4vw, 52px);
  --fs-2xl: clamp(36px, 3.4vw, 60px);
  --fs-3xl: clamp(48px, 7vw, 96px);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --wwd-item-h: 80px;
}