/* ============================================================
   Fruition Design System — Colors & Typography Tokens
   Source: Fruition Brand Guidelines (2022, Fruition Growth LLC)
   ============================================================ */

/* ---------- Webfonts ----------
   Primary: Fieldwork (Adobe Typekit — not openly licensed).
   Sanctioned brand fallbacks: Montserrat (display), Open Sans (body).
   Additional fallback: Inter — modern open-source neo-grotesque with a
   close x-height + geometric profile to Fieldwork; useful when
   Montserrat/Open Sans cannot be loaded (e.g. tight CDN budgets,
   environments that already ship Inter, or print PDFs where Inter
   renders cleaner at small sizes).
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@400;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ===== BRAND PALETTE (primary) ===== */
  --fr-ocean:       #2063F8;   /* H221 S94 L55 */
  --fr-ocean-dark:  #1645AE;
  --fr-ocean-light: #6392FA;

  --fr-sky:         #02B2FE;   /* H198 S99 L50 */
  --fr-sky-dark:    #028ECB;
  --fr-sky-light:   #4EC9FE;

  --fr-poppy:       #FC5C50;   /* H4 S97 L65 */
  --fr-poppy-dark:  #D4463B;
  --fr-poppy-light: #FD7C72;

  /* ===== BACKGROUND PALETTE ===== */
  --fr-blueberry:   #13216C;   /* primary dark bg */
  --fr-night-sky:   #0D174C;   /* deepest bg */

  /* ===== NEUTRALS (derived; Fruition design is minimal, mostly white on dark) ===== */
  --fr-white:       #FFFFFF;
  --fr-ink:         #0D174C;   /* same as night-sky for body text on light */
  --fr-fog:         #F4F6FB;   /* subtle off-white surface */
  --fr-mist:        #E6EBF5;   /* hairline dividers */
  --fr-slate:       #6B7494;   /* muted body copy */
  --fr-pebble:      #A9B0C6;   /* disabled / tertiary */

  /* ===== SEMANTIC FG / BG ===== */
  --fr-fg-1:        var(--fr-white);           /* primary text on dark */
  --fr-fg-2:        rgba(255,255,255,0.78);    /* secondary text on dark */
  --fr-fg-3:        rgba(255,255,255,0.55);    /* tertiary text on dark */
  --fr-fg-1-invert: var(--fr-ink);             /* primary text on light */
  --fr-fg-2-invert: var(--fr-slate);
  --fr-fg-3-invert: var(--fr-pebble);

  --fr-bg-1:        var(--fr-blueberry);       /* primary surface */
  --fr-bg-2:        var(--fr-night-sky);       /* elevated dark surface */
  --fr-bg-1-invert: var(--fr-white);
  --fr-bg-2-invert: var(--fr-fog);

  --fr-accent:      var(--fr-poppy);           /* default call-to-action */
  --fr-accent-alt:  var(--fr-sky);

  /* ===== GRADIENTS ===== */
  --fr-gradient:         linear-gradient(90deg, #2063F8 0%, #FC5C50 100%);
  --fr-gradient-reverse: linear-gradient(90deg, #FC5C50 0%, #2063F8 100%);
  --fr-gradient-diag:    linear-gradient(135deg, #2063F8 0%, #FC5C50 100%);

  /* ===== TYPOGRAPHY ===== */
  /* Fieldwork is the primary face. Because it's licensed through Adobe
     Typekit we don't inline it — drop the font files in /fonts/ and
     replace this stack to switch on. The brand-approved fallback chain
     matches what Fruition uses in Google Slides and similar tools. */
  --fr-font-display: "Fieldwork", "Montserrat", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fr-font-body:    "Fieldwork", "Open Sans", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fr-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Display scale — 3XL … XS, 120% line-height per guide (60px = 3XL reference) */
  --fr-text-3xl: 60px;
  --fr-text-2xl: 48px;
  --fr-text-xl:  40px;
  --fr-text-l:   32px;
  --fr-text-m:   24px;
  --fr-text-s:   20px;
  --fr-text-xs:  16px;

  /* Body scale — 23px = L body per guide, 150% line-height */
  --fr-body-l:   23px;
  --fr-body-m:   18px;
  --fr-body-s:   16px;
  --fr-body-xs:  14px;

  --fr-lh-display: 1.2;
  --fr-lh-body:    1.5;

  --fr-weight-light:    300;   /* Fieldwork Geo Light */
  --fr-weight-regular:  400;
  --fr-weight-demi:     600;   /* Fieldwork Geo DemiBold / Montserrat SemiBold */
  --fr-weight-bold:     700;
  --fr-weight-black:    800;   /* Fieldwork Geo Black / Montserrat ExtraBold */

  /* ===== SPACING (8pt grid) ===== */
  --fr-space-0:  0;
  --fr-space-1:  4px;
  --fr-space-2:  8px;
  --fr-space-3:  12px;
  --fr-space-4:  16px;
  --fr-space-5:  24px;
  --fr-space-6:  32px;
  --fr-space-7:  48px;
  --fr-space-8:  64px;
  --fr-space-9:  96px;
  --fr-space-10: 128px;

  /* ===== RADII ===== */
  --fr-radius-xs:   2px;
  --fr-radius-sm:   4px;
  --fr-radius-md:   8px;
  --fr-radius-lg:   16px;
  --fr-radius-pill: 999px;
  /* Hexagon border & bg are shape-based, not radii — see hex-clip below */

  /* ===== BORDERS ===== */
  --fr-border-hairline: 1px solid rgba(255,255,255,0.12);
  --fr-border-strong:   2px solid var(--fr-ocean);
  --fr-border-gradient: 2px solid transparent; /* use with border-image: var(--fr-gradient) 1 */

  /* ===== SHADOWS =====
     Fruition leans flat; shadows are soft glows against the dark bg. */
  --fr-shadow-sm:  0 2px 8px rgba(2, 10, 40, 0.35);
  --fr-shadow-md:  0 8px 24px rgba(2, 10, 40, 0.45);
  --fr-shadow-lg:  0 24px 64px rgba(2, 10, 40, 0.55);
  --fr-glow-ocean: 0 0 32px rgba(32, 99, 248, 0.35);
  --fr-glow-poppy: 0 0 32px rgba(252, 92, 80, 0.35);

  /* ===== MOTION ===== */
  --fr-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --fr-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --fr-dur-fast:    150ms;
  --fr-dur-med:     260ms;
  --fr-dur-slow:    420ms;

  /* ===== HEXAGON (brand shape) =====
     Fruition ices icons inside a hexagon, sometimes outlined, sometimes
     filled with the gradient (for team headshots). Use as clip-path. */
  --fr-hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* ============================================================
   Semantic element defaults — apply by adding class="fruition" to
   a wrapper, or drop on <body> in a Fruition context.
   ============================================================ */
.fruition {
  font-family: var(--fr-font-body);
  color: var(--fr-fg-1);
  background: var(--fr-blueberry);
  line-height: var(--fr-lh-body);
  font-size: var(--fr-body-m);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fruition h1, .fruition .h1 {
  font-family: var(--fr-font-display);
  font-weight: var(--fr-weight-black);
  font-size: var(--fr-text-3xl);
  line-height: var(--fr-lh-display);
  letter-spacing: -0.02em;
  margin: 0 0 var(--fr-space-5) 0;
}
.fruition h2, .fruition .h2 {
  font-family: var(--fr-font-display);
  font-weight: var(--fr-weight-bold);
  font-size: var(--fr-text-2xl);
  line-height: var(--fr-lh-display);
  letter-spacing: -0.015em;
  margin: 0 0 var(--fr-space-4) 0;
}
.fruition h3, .fruition .h3 {
  font-family: var(--fr-font-display);
  font-weight: var(--fr-weight-demi);
  font-size: var(--fr-text-xl);
  line-height: var(--fr-lh-display);
  margin: 0 0 var(--fr-space-4) 0;
}
.fruition h4, .fruition .h4 {
  font-family: var(--fr-font-display);
  font-weight: var(--fr-weight-demi);
  font-size: var(--fr-text-l);
  line-height: var(--fr-lh-display);
  margin: 0 0 var(--fr-space-3) 0;
}
.fruition h5, .fruition .h5 {
  font-family: var(--fr-font-display);
  font-weight: var(--fr-weight-demi);
  font-size: var(--fr-text-m);
  line-height: var(--fr-lh-display);
  margin: 0 0 var(--fr-space-3) 0;
}
.fruition p, .fruition .p {
  font-family: var(--fr-font-body);
  font-weight: var(--fr-weight-regular);
  font-size: var(--fr-body-m);
  line-height: var(--fr-lh-body);
  margin: 0 0 var(--fr-space-4) 0;
  color: var(--fr-fg-2);
}
.fruition .lead {
  font-size: var(--fr-body-l);
  line-height: var(--fr-lh-body);
  color: var(--fr-fg-1);
}
.fruition .eyebrow {
  font-family: var(--fr-font-display);
  font-weight: var(--fr-weight-bold);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fr-sky);
}
.fruition code, .fruition .mono {
  font-family: var(--fr-font-mono);
  font-size: 0.9em;
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: var(--fr-radius-sm);
}
.fruition a {
  color: var(--fr-sky);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--fr-dur-fast) var(--fr-ease);
}
.fruition a:hover { border-bottom-color: currentColor; }

/* Gradient-text utility (used sparingly, per guide) */
.fruition .gradient-text {
  background: var(--fr-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Gradient border utility (the most-used brand motif) */
.fruition .gradient-border {
  position: relative;
  background: var(--fr-blueberry);
  border-radius: var(--fr-radius-md);
}
.fruition .gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--fr-gradient);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ============================================================
   LIGHT-TRACK MODIFIER — for slide decks, PDFs, one-pagers,
   reports, and anything destined for print. Brand stays Fruition;
   surface flips white-forward, accents become typographic ink.
   Wrap a page or deck in <body class="fruition fruition-light">.
   ============================================================ */
.fruition.fruition-light {
  background: var(--fr-white);
  color: var(--fr-ink);
}
.fruition.fruition-light h1, .fruition.fruition-light .h1,
.fruition.fruition-light h2, .fruition.fruition-light .h2,
.fruition.fruition-light h3, .fruition.fruition-light .h3,
.fruition.fruition-light h4, .fruition.fruition-light .h4,
.fruition.fruition-light h5, .fruition.fruition-light .h5 {
  color: var(--fr-blueberry);     /* Blueberry as typographic ink */
}
.fruition.fruition-light p, .fruition.fruition-light .p {
  color: var(--fr-slate);
}
.fruition.fruition-light .lead { color: var(--fr-ink); }
.fruition.fruition-light .eyebrow { color: var(--fr-ocean); }
.fruition.fruition-light a { color: var(--fr-ocean); }
.fruition.fruition-light .surface-soft { background: var(--fr-fog); }
.fruition.fruition-light .rule-hair { border-top: 1px solid var(--fr-mist); }
.fruition.fruition-light .rule-gradient { height: 2px; background: var(--fr-gradient); border: 0; }
.fruition.fruition-light .hex-outline-ink::before {
  background: var(--fr-blueberry);   /* outline color when on light */
}
/* Dark slides inside a light deck — use on cover / closer / section break only */
.fruition.fruition-light .slide-dark {
  background: var(--fr-blueberry);
  color: var(--fr-white);
}
.fruition.fruition-light .slide-dark h1,
.fruition.fruition-light .slide-dark h2,
.fruition.fruition-light .slide-dark h3 { color: var(--fr-white); }
.fruition.fruition-light .slide-dark p   { color: rgba(255,255,255,0.78); }

/* Hexagon utility — wrap icon or headshot */
.fruition .hex {
  clip-path: var(--fr-hex-clip);
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fr-gradient-diag);
}
.fruition .hex-outline {
  position: relative;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fruition .hex-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--fr-hex-clip);
  background: var(--fr-gradient-diag);
  padding: 2px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}