/* =====================================================================
   FundEasy Family Design System — styles.css
   Source of truth: Final Brand Refresh (Family, FundEasy, eKYROS,
   PlusLink brand guides + BrandScripts), 2026.

   THREE BRANDS, ONE SYSTEM.
   Structure, type, spacing, motion and neutrals are shared by all
   three. Only the brand color block changes. Set the brand on any
   wrapper (usually <html> or <body>):

     <body data-brand="fundeasy">   emerald   (default)
     <body data-brand="ekyros">     indigo
     <body data-brand="pluslink">   violet

   Always design against the --brand-* roles, never a raw hex, so a
   surface can be re-skinned by changing one attribute.
   ===================================================================== */

/* ---------- Type: Jost (Futura substitute), Inter, Source Serif 4 ---- */
@font-face{font-family:"Jost";src:url("assets/fonts/Jost-Variable.ttf") format("truetype-variations");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("assets/fonts/Jost-Italic-Variable.ttf") format("truetype-variations");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-SemiBold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-ExtraBold.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("assets/fonts/SourceSerif4-Variable.ttf") format("truetype-variations");font-weight:200 900;font-style:normal;font-display:swap}

:root{
  /* =========================================================
     FAMILY BRIDGE COLORS
     Coral is the family accent (energy, highlight, emphasis);
     teal bridges emerald and indigo when two brands appear
     together. Exactly as given in the Bridge and Neutrals
     reference. No deeper or lighter variants: if a surface
     needs one, it gets added to the guide first.
     ========================================================= */
  --coral:#EE6C4D;
  --teal:#0E9488;

  /* =========================================================
     FAMILY NEUTRALS
     Four, exactly as the guide gives them. There is no gray
     ramp: every border, tint and app surface below is a
     measured mix of ink into white, so nothing here is a new
     color, only less of an existing one.
     ========================================================= */
  --ink:#191E2A;
  --slate:#5A6172;
  --creme:#FBF8F3;
  --white:#FFFFFF;

  /* =========================================================
     TEXT · SURFACE · BORDER ROLES (brand-neutral)
     ========================================================= */
  --text:var(--ink);
  --text-soft:color-mix(in srgb,var(--ink) 82%,var(--white));
  --text-subtle:var(--slate);
  --text-faint:color-mix(in srgb,var(--slate) 74%,var(--white));
  --text-inverse:var(--white);

  --bg:var(--white);
  --bg-warm:var(--creme);
  --bg-app:color-mix(in srgb,var(--ink) 3%,var(--white));
  --surface:var(--white);
  --surface-alt:color-mix(in srgb,var(--ink) 3%,var(--white));
  --surface-ink:var(--ink);

  --border:color-mix(in srgb,var(--ink) 14%,var(--white));
  --border-soft:color-mix(in srgb,var(--ink) 7%,var(--white));
  --border-strong:color-mix(in srgb,var(--ink) 26%,var(--white));

  /* =========================================================
     STATUS
     Status must never borrow a brand color. A green success
     would read as FundEasy, an indigo info as eKYROS, a violet
     one as PlusLink, and the same badge would change meaning
     between products. Success uses the family teal (shared by
     all three, owned by none); info uses a neutral steel blue
     drawn from the neutral ramp, not from any palette.
     ========================================================= */
  --success:#0E9488; --success-bg:#DCF0EE;
  --warning:#C2761A; --warning-bg:#FBEFDD;
  --error:#C2402F;   --error-bg:#FBE8E5;
  --info:#38506E;    --info-bg:#E5EAF1;

  /* =========================================================
     DATA VISUALIZATION
     A ramp, not a rainbow, and built only from colors the
     guides already contain. Categorical series step down the
     active brand, then reach for the family accent and slate.
     Because these resolve at the point of use, a chart
     inherits whichever brand its surface is set to. Never
     hard-code a hex in a chart.
     ========================================================= */
  --chart-1:var(--brand-deep);
  --chart-2:var(--brand);
  --chart-3:var(--coral);
  --chart-4:var(--slate);
  --chart-5:var(--brand-tint);

  /* =========================================================
     TYPOGRAPHY
     Jost   — display. Stands in for Futura in the guides; use
              for wordmark-adjacent headlines, numbers, eyebrows.
     Inter  — interface and body. Everything you read at length.
     Source Serif 4 — editorial accent only: pull quotes,
              testimonials, mission statements. Never UI chrome.
     ========================================================= */
  --font-display:"Jost","Futura","Futura PT","Century Gothic",sans-serif;
  --font-body:"Inter","Segoe UI",Helvetica,Arial,sans-serif;
  --font-editorial:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

  --fs-hero:64px;
  --fs-display:48px;
  --fs-h1:36px;
  --fs-h2:28px;
  --fs-h3:22px;
  --fs-h4:18px;
  --fs-lead:19px;
  --fs-body:16px;
  --fs-small:14px;
  --fs-micro:12px;

  --lh-tight:1.05;   /* @kind other */
  --lh-heading:1.18; /* @kind other */
  --lh-body:1.55;    /* @kind other */

  --track-display:-0.02em;
  --track-eyebrow:0.14em;

  /* =========================================================
     SPACING · RADIUS · ELEVATION · MOTION · LAYOUT
     Radius is soft: the FundEasy mark is built from rounded
     rectangles, so cards and buttons follow.
     ========================================================= */
  --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-16:64px; --space-20:80px; --space-24:96px;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:999px;

  --shadow-1:0 1px 2px rgba(25,30,42,.06);
  --shadow-2:0 1px 2px rgba(25,30,42,.05),0 6px 16px rgba(25,30,42,.06);
  --shadow-3:0 6px 12px rgba(25,30,42,.05),0 18px 40px rgba(25,30,42,.08);

  --ease-out:cubic-bezier(.2,.7,.2,1);    /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1);  /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:360ms; /* @kind other */

  --container:1200px;
  --container-app:1440px;
  --gutter:24px;
}

/* =====================================================================
   BRAND BLOCKS
   Each brand supplies the same four roles, and every value is
   printed in that brand's color reference. Nothing here is
   derived or interpolated.
     --brand-deep   darkest, for dark sections and headline ink
     --brand        the signature color, for primary actions
     --brand-tint   the pale wash, for backgrounds and badges
     --brand-grad   the guide's gradient, deep to pale
   ===================================================================== */

:root,
[data-brand="fundeasy"]{
  --brand-name:"FundEasy"; /* @kind other */
  --brand-deep:#063E2C;
  --brand:#10805C;
  --brand-tint:#D6EDE3;
  --brand-grad:linear-gradient(90deg,#063E2C 0%,#10805C 55%,#D6EDE3 100%); /* @kind color */
  --brand-on:var(--white);
  --brand-hover:#0C6B4D;
  --brand-press:#08573E;
  --link:#10805C;
  --link-hover:#063E2C;
}

[data-brand="ekyros"]{
  --brand-name:"eKYROS"; /* @kind other */
  --brand-deep:#191557;
  --brand:#3B34A0;
  --brand-tint:#E1DEF7;
  --brand-grad:linear-gradient(90deg,#191557 0%,#3B34A0 50%,#E1DEF7 100%); /* @kind color */
  --brand-on:var(--white);
  --brand-hover:#322B8C;
  --brand-press:#282279;
  --link:#3B34A0;
  --link-hover:#191557;
}

[data-brand="pluslink"]{
  --brand-name:"PlusLink"; /* @kind other */
  --brand-deep:#33288A;
  --brand:#7B6BEF;
  --brand-tint:#E6E2FB;
  --brand-grad:linear-gradient(90deg,#33288A 0%,#7B6BEF 55%,#E6E2FB 100%); /* @kind color */
  --brand-on:var(--white);
  --brand-hover:#6857E4;
  --brand-press:#5646CF;
  --link:#5646CF;
  --link-hover:#33288A;
}

/* =====================================================================
   ELEMENT DEFAULTS
   ===================================================================== */
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--text);line-height:var(--lh-heading);letter-spacing:var(--track-display);margin:0 0 var(--space-4);font-weight:600;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:700}
h2{font-size:var(--fs-h2);font-weight:700}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4);letter-spacing:0}
p{margin:0 0 var(--space-4);text-wrap:pretty}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline;text-underline-offset:3px}
strong{font-weight:600}
small{font-size:var(--fs-small);color:var(--text-subtle)}
code,kbd,samp{font-family:var(--font-mono);font-size:.92em}
table,.tabular,[data-tabular]{font-variant-numeric:tabular-nums lining-nums}
hr{border:0;border-top:1px solid var(--border);margin:var(--space-8) 0}
::selection{background:var(--brand-tint);color:var(--brand-deep)}

/* =====================================================================
   TEXT UTILITIES
   ===================================================================== */
.fe-hero{font-family:var(--font-display);font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:var(--track-display);font-weight:700}
.fe-display{font-family:var(--font-display);font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--track-display);font-weight:700}
.fe-lead{font-size:var(--fs-lead);line-height:1.5;color:var(--text-soft)}
.fe-eyebrow{font-family:var(--font-display);font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--brand)}
.fe-quote{font-family:var(--font-editorial);font-size:26px;line-height:1.35;font-weight:400;color:var(--text)}
.fe-stat{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--brand)}