/* ==========================================================================
   Cue by Fountain — Design Tokens
   Extracted 1:1 from Figma "Asset Templates" (fVI6R11FqdJWwizO6jngJQ) and
   reconciled with the two in-house systems in /Design Component Library:
     · Fountain Marketing Website — tokens/, guidelines/, components/
     · Marketing Design System     — assets/, guidelines/foundations/
   Where the two disagreed, the Figma file won for anything the Template frame
   actually uses, and the in-house system won for everything it adds.

   Brand typeface is CircularXX (Lineto, commercial). The .otf files sit in
   the Marketing Design System under fonts/ — swap the @font-face block below
   if you ever want a true match. Plus Jakarta Sans is the deliberate stand-in.
   ========================================================================== */

/* Self-hosted so the library renders identically offline and in print/PDF. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-600: #4f46e5;
  --brand-800: #3730a3;

  /* ---- Gradients ------------------------------------------------------ */
  /* Names and stops come from the in-house colors.css — every section that
     had hand-approximated one of these now points at the real token. */
  --gradient-ai: linear-gradient(180deg, #3935ff 0%, #8f00ff 100%);
  --gradient-hero: linear-gradient(0deg, #ffffff -47.85%, #177dd5 13.53%, #483dc4 62.01%, #111f63 93.79%);
  --gradient-immersive: linear-gradient(145.365deg, #2922aa 0.03%, #2c88d7 100.03%);
  --gradient-sky: linear-gradient(180deg, #ffffff 0%, #d0deff 50.96%, #ffffff 100%);
  --gradient-hero-radial-center: radial-gradient(939.836px 782.19px at 50% 50%, #59aff8 12.5%, #5d77e0 38.46%, #2f72d6 54.81%, #000452 100%);
  --gradient-hero-radial-left: radial-gradient(1351.228px 1153.33px at 5.38% 52.76%, #59aff8 17.69%, #4242ff 31.25%, #1e49c3 59.62%, #000452 100%);
  --gradient-hero-diagonal: linear-gradient(112.567deg, #000452 11.89%, #2f72d6 63.3%, #59aff8 111.44%);
  --gradient-panel-deep: linear-gradient(107.436deg, #0e3575 0%, #030121 100%);
  --gradient-panel-blue: linear-gradient(109.271deg, #130e75 0.01%, #2c88d7 100.01%);
  --gradient-app-icon: linear-gradient(180deg, #293fcf 0%, #59aff8 100%);
  --gradient-footer: linear-gradient(90deg, #010d5a 0%, #0d42a1 100%);
  --fade-to-white: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 100%);
  --scrim-slate: linear-gradient(90deg, #0f172a 0%, rgba(15,23,42,0.3) 100%);

  /* Back-compat aliases — earlier section CSS uses these names. */
  --gradient-brand: var(--gradient-ai);
  --gradient-ai-600: var(--gradient-ai);
  --gradient-wash: var(--gradient-sky);
  --wash-blue: #d0deff;

  /* ---- Glass ---------------------------------------------------------- */
  --glass-fill: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.3) 100%);
  --glass-solid: rgba(255, 255, 255, 0.3);
  --glass-quiet: rgba(255, 255, 255, 0.1);
  --glass-blur: blur(14.498px);

  /* ---- Neutrals ------------------------------------------------------- */
  --neutral-900: #0f172a;
  --neutral-600: #404d5f;
  --neutral-400: #687281;
  --neutral-300: #b7c0cb;
  --neutral-200: #e2e8f0;
  --neutral-100: #f1f5f9;
  --neutral-50:  #f8fafc;
  --neutral-white: #ffffff;
  --black: #000000;

  /* ---- Semantic accents (50 / 600 / 800 triads) ----------------------- */
  --green-50:  #d8f9d3; --green-600:  #4ea441; --green-800:  #145b2f;
  --amber-50:  #fff8e1; --amber-600:  #f68006; --amber-800:  #92400e;
  --lemon-50:  #fffee1; --lemon-600:  #ffcf23; --lemon-800:  #664f00;
  --rose-50:   #fff1f2; --rose-600:   #e11d48; --rose-800:   #9f1239;
  --purple-50: #f4e6ff; --purple-600: #a738ff; --purple-800: #5b00a3;
  --teal-50:   #e3fafa; --teal-600:   #39d4d6;
  --blue-50:   #e7f3ff; --blue-600:   #357fef; --blue-800:   #0c4497;
  --blue-500:  #54a4f3;

  /* ---- Type family ---------------------------------------------------- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ---- Type scale (px sizes straight from Figma) ----------------------- */
  --h1: 72px;
  --h2: 56px;
  --h3: 48px;
  --h4: 40px;
  /* Many nodes in the Template frame resolve H4 to 32px rather than the published
     40. Those sections opt in with --h4-sm rather than the token being changed. */
  --h4-sm: 32px;
  --h5: 26px;
  --h6: 22px;
  --text-xl: 22px;
  --text-l:  18px;
  --text-m:  16px;
  --text-s:  14px;
  --text-xs: 12px;

  /* Line heights */
  --lh-display: 1;      /* H1 / H2 */
  --lh-tight:   1.1;    /* H3 / H4 */
  --lh-snug:    1.3;    /* H5 / small paragraph */
  --lh-body:    1.4;    /* paragraphs */

  /* Tracking — Figma stores these as % of size */
  --track-display: -0.03em;  /* H1 / H2 */
  --track-tight:   -0.02em;  /* H3 / H4 */
  --track-none:    0;

  /* ---- Spacing scale --------------------------------------------------- */
  --space-0:   0px;
  --space-05:  2px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;

  /* ---- Layout ---------------------------------------------------------- */
  --container-large: 1280px;
  --max-width-large: 768px;
  --max-width-xsmall: 400px;
  --frame-width: 1440px;
  --margin-lr: 80px;          /* Marge Right Left */
  --margin-tb: 64px;          /* Marge Top Bottom */
  --section-pad-small: 48px;
  --section-pad: 80px;

  /* ---- Radii ------------------------------------------------------------ */
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-full: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  /* Fountain almost never uses a grey drop shadow on white: borders are inset
     rings, and lift is a wide blue-grey glow. */
  --shadow-5:  rgba(0, 0, 0, 0.05);
  --shadow-15: rgba(0, 0, 0, 0.15);
  --shadow-xs:   0 1px 1px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 8px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 12px 0 rgba(0, 0, 0, 0.05);
  --shadow-lift: 0 1px 8px 0 rgba(0, 0, 0, 0.15);
  --shadow-base: 0 1px 2px 0 var(--shadow-15);
  --shadow-card: 0 4px 24px 0 rgba(15, 23, 42, 0.06);
  /* The signature one: a wide soft halo under product surfaces. */
  --shadow-glow:  0 1px 73px 0 rgba(135, 150, 197, 0.55), 0 4px 76px 0 rgba(191, 202, 230, 0.8);
  --shadow-glass: inset 0 0 10.356px 0 rgba(255, 255, 255, 0.25);
  /* Halo behind the Cue orb — the mark is never placed without it. */
  --shadow-bloom: 0 0 187.81px 0 #aacdff;

  --ring-default: inset 0 0 0 1px var(--neutral-200);
  --ring-strong:  inset 0 0 0 1px var(--neutral-300);
  --ring-focus:   inset 0 0 0 1px var(--brand-600), 0 0 0 3px rgba(79, 70, 229, 0.15);
}