@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   FUNDSTATE — Foundations  (v3 · brand fonts)
   ============================================================ */

/* WORDMARK / SERIF DISPLAY — high-contrast didone-style serif used for the
   "Fundstate" logo and luxury editorial headlines. Playfair Display is the
   closest free Google match. Note: do NOT recreate the wordmark in CSS —
   always use the supplied logo PNGs in assets/logo/. */

/* BRAND TYPE — Open Sans family (uploaded). Three widths:
   - Open Sans (normal)   : body & UI default
   - Open Sans SemiCondensed : tighter UI / labels / tables
   - Open Sans Condensed  : display headlines (gives the rounded-but-tight
     look seen on the live site)
*/

/* Open Sans · normal width */
@font-face { font-family: 'Open Sans'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/OpenSans-Light.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-weight: 300; font-style: italic; font-display: swap; src: url('fonts/OpenSans-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/OpenSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/OpenSans-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/OpenSans-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-weight: 500; font-style: italic; font-display: swap; src: url('fonts/OpenSans-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/OpenSans-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-style: italic; font-display: swap; src: url('fonts/OpenSans-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/OpenSans-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-style: italic; font-display: swap; src: url('fonts/OpenSans-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/OpenSans-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-weight: 800; font-style: italic; font-display: swap; src: url('fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype'); }

/* Open Sans · SemiCondensed */
@font-face { font-family: 'Open Sans SemiCondensed'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/OpenSans_SemiCondensed-Light.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans SemiCondensed'; font-weight: 300; font-style: italic; font-display: swap; src: url('fonts/OpenSans_SemiCondensed-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans SemiCondensed'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/OpenSans_SemiCondensed-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans SemiCondensed'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/OpenSans_SemiCondensed-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans SemiCondensed'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/OpenSans_SemiCondensed-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans SemiCondensed'; font-weight: 500; font-style: italic; font-display: swap; src: url('fonts/OpenSans_SemiCondensed-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans SemiCondensed'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/OpenSans_SemiCondensed-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans SemiCondensed'; font-weight: 600; font-style: italic; font-display: swap; src: url('fonts/OpenSans_SemiCondensed-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans SemiCondensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/OpenSans_SemiCondensed-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans SemiCondensed'; font-weight: 700; font-style: italic; font-display: swap; src: url('fonts/OpenSans_SemiCondensed-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans SemiCondensed'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/OpenSans_SemiCondensed-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans SemiCondensed'; font-weight: 800; font-style: italic; font-display: swap; src: url('fonts/OpenSans_SemiCondensed-ExtraBoldItalic.ttf') format('truetype'); }

/* Open Sans · Condensed */
@font-face { font-family: 'Open Sans Condensed'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/OpenSans_Condensed-Light.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 300; font-style: italic; font-display: swap; src: url('fonts/OpenSans_Condensed-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/OpenSans_Condensed-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/OpenSans_Condensed-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/OpenSans_Condensed-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 500; font-style: italic; font-display: swap; src: url('fonts/OpenSans_Condensed-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/OpenSans_Condensed-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 600; font-style: italic; font-display: swap; src: url('fonts/OpenSans_Condensed-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/OpenSans_Condensed-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 700; font-style: italic; font-display: swap; src: url('fonts/OpenSans_Condensed-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/OpenSans_Condensed-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans Condensed'; font-weight: 800; font-style: italic; font-display: swap; src: url('fonts/OpenSans_Condensed-ExtraBoldItalic.ttf') format('truetype'); }

/* Mono for tickers/numerics */

:root {
  /* ----------------------------------------------------------
     COLOR — Brand
     Bright fresh green accent, near-white surfaces, soft greys,
     near-black text. Matched from screenshots.
     ---------------------------------------------------------- */

  /* Brand green — fresh, saturated, optimistic */
  --green-50:  #EAF7EF;
  --green-100: #D1EFDC;
  --green-200: #A7E2BB;
  --green-300: #74D196;
  --green-400: #4FC57B;
  --green-500: #3CC36A;   /* PRIMARY brand green — buttons, highlights */
  --green-600: #2EB35C;   /* hover */
  --green-700: #239249;   /* press */
  --green-800: #186A35;
  --green-900: #0F4622;

  /* Surfaces — cool off-white, NOT warm paper */
  --surface-0:  #FFFFFF;       /* card, modal */
  --surface-1:  #F4F5F4;       /* page bg / alt section */
  --surface-2:  #ECEEEC;       /* sunken */
  --surface-3:  #E2E5E2;

  /* Ink / text — cool dark navy, matched to the official wordmark */
  --ink-900: #0F1B2D;          /* primary text & logo — deep navy */
  --ink-800: #182539;
  --ink-700: #2A3447;
  --ink-500: #5A6373;
  --ink-400: #828A98;
  --ink-300: #A9AFB9;
  --ink-200: #CBCFD6;
  --ink-100: #E2E5EA;

  /* Brand navy — the logo's "blue" version */
  --navy: #0F1B2D;

  /* Semantic — minimal, used only for status */
  --up:    var(--green-500);
  --down:  #E0584A;
  --warn:  #E5B547;
  --info:  #4A8FCB;

  /* Semantic roles */
  --bg:        var(--surface-1);
  --bg-elev:   var(--surface-0);
  --bg-sunken: var(--surface-2);

  --fg:        var(--ink-900);
  --fg-muted:  var(--ink-500);
  --fg-subtle: var(--ink-400);
  --fg-on-accent: #FFFFFF;

  --accent:        var(--green-500);
  --accent-hover:  var(--green-600);
  --accent-press:  var(--green-700);
  --accent-soft:   var(--green-50);
  --accent-ink:    var(--green-700);   /* darker green for inline text highlight */

  --border:        var(--ink-100);
  --border-strong: var(--ink-200);
  --border-accent: var(--green-200);   /* pale green outline (info cards, login btn) */

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-serif:    'Playfair Display', 'Times New Roman', Georgia, serif; /* WORDMARK + editorial only */
  --font-display:  'Open Sans SemiCondensed', 'Open Sans', system-ui, sans-serif; /* headlines */
  --font-headline: 'Open Sans SemiCondensed', 'Open Sans', system-ui, sans-serif; /* mid-density */
  --font-sans:     'Open Sans', system-ui, sans-serif; /* body */
  --font-mono:     'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-wordmark: var(--font-serif);

  /* Weights */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* Type scale — headlines are LARGE and REGULAR weight (key insight from live site) */
  --fs-display-2xl: clamp(48px, 6vw, 88px);
  --fs-display-xl:  clamp(40px, 4.8vw, 68px);
  --fs-display-lg:  clamp(32px, 3.6vw, 52px);
  --fs-display-md:  clamp(24px, 2.6vw, 36px);

  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;

  --fs-lead:  18px;
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-micro: 12px;

  --lh-display: 1.08;
  --lh-heading: 1.2;
  --lh-body:    1.55;

  /* Tracking — Open Sans Condensed wants slightly negative on big display,
     near-zero on body */
  --tr-display:  -0.015em;
  --tr-heading:  -0.005em;
  --tr-body:      0em;

  /* ----------------------------------------------------------
     SPACING — 4px base
     ---------------------------------------------------------- */
  --sp-1:   4px;  --sp-2:   8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  20px;  --sp-6:  24px;  --sp-8:  32px; --sp-10: 40px;
  --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px; --sp-24: 96px;
  --sp-32:128px;

  /* ----------------------------------------------------------
     RADII — generous. Buttons are pills, cards rounded.
     ---------------------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;          /* button corner radius */
  --r-2xl:  36px;          /* large card / hero panel */
  --r-pill: 999px;

  /* Borders */
  --bw-hair: 1px;
  --bw-strong: 1.5px;

  /* Shadows — very soft, no aggressive elevation */
  --shadow-xs: 0 1px 2px rgba(22, 26, 24, 0.04);
  --shadow-sm: 0 4px 12px rgba(22, 26, 24, 0.06);
  --shadow-md: 0 12px 28px rgba(22, 26, 24, 0.08);
  --shadow-lg: 0 24px 48px rgba(22, 26, 24, 0.10);
  --shadow-btn: 0 6px 16px rgba(60, 195, 106, 0.28);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
}

/* ============================================================
   BASE
   ============================================================ */
html { color-scheme: light; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE
   Headlines use the DISPLAY font (rounded geometric sans), regular weight.
   ============================================================ */

.display-2xl, h1.display {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-display-2xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--fg);
}
.display-xl {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.display-lg {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.display-md {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-display-md);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
}

/* H1-H4 — SemiCondensed for mid-density headlines */
h1, .h1 { font-family: var(--font-headline); font-weight: var(--w-semibold); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); margin: 0; }
h2, .h2 { font-family: var(--font-headline); font-weight: var(--w-semibold); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); margin: 0; }
h3, .h3 { font-family: var(--font-headline); font-weight: var(--w-semibold); font-size: var(--fs-h3); line-height: var(--lh-heading); margin: 0; }
h4, .h4 { font-family: var(--font-sans);     font-weight: var(--w-semibold); font-size: var(--fs-h4); line-height: var(--lh-heading); margin: 0; }

/* Inline highlight — the bright green word inside a headline */
.hl, .display-hl {
  color: var(--accent);
}

/* Body text */
p, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); margin: 0; }
.lead    { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg-muted); }
.small   { font-size: var(--fs-small); }
.micro   { font-size: var(--fs-micro); color: var(--fg-subtle); }

/* Mono / numerals */
.mono, code, .num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}
.num { font-variant-numeric: tabular-nums; }

.t-up   { color: var(--up);   }
.t-down { color: var(--down); }

::selection { background: var(--green-100); color: var(--ink-900); }