/* ============================================================
   24invest — Foundations
   Type & Color tokens. Import this once, globally.
   ============================================================ */

/* ---------- Webfonts: Geist Sans + Geist Mono via Google Fonts ----------
   NOTE: Geist is loaded from Google Fonts CDN. If you need a fully
   self-hosted build, drop the .woff2 files into /fonts and update.
   ------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ============== TYPE: families ============== */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  --font-display: "Geist", var(--font-sans); /* same family, used at display weight/tracking */

  /* ============== TYPE: scale ============== */
  /* 8pt rhythm. Display sizes scale-down via clamp() on the semantic vars. */
  --fs-12: 0.75rem;   /* 12 */
  --fs-13: 0.8125rem; /* 13 */
  --fs-14: 0.875rem;  /* 14 */
  --fs-15: 0.9375rem; /* 15 */
  --fs-16: 1rem;      /* 16 */
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --lh-tight: 1.04;
  --lh-snug: 1.16;
  --lh-normal: 1.45;
  --lh-loose: 1.6;

  /* Tracking: tight on display, neutral on body, slight positive on micro-caps */
  --tr-display: -0.035em;
  --tr-heading: -0.02em;
  --tr-body: -0.005em;
  --tr-mono: 0;
  --tr-caps: 0.08em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ============== COLOR: brand ==============
     Lime → Cyan, sampled from the infinity mark. Two stops below give a
     refined "premium" pair used for solid fills, plus the gradient.       */
  --brand-lime: #95D02E;      /* primary lime (mark left) */
  --brand-lime-bright: #A6E635;
  --brand-lime-deep: #6FA614;

  --brand-cyan: #1FA2DE;      /* primary cyan (mark right) */
  --brand-cyan-bright: #34C0F2;
  --brand-cyan-deep: #0A75A8;

  --brand-mid: #5AB48A;       /* the midpoint where the loop crosses */

  --brand-gradient: linear-gradient(95deg, var(--brand-lime) 0%, var(--brand-mid) 48%, var(--brand-cyan) 100%);
  --brand-gradient-soft: linear-gradient(95deg, rgba(149,208,46,0.18), rgba(31,162,222,0.18));
  --brand-gradient-text: linear-gradient(95deg, #B8E84A 0%, #34C0F2 100%);

  /* ============== COLOR: neutrals (dark-first system) ============== */
  /* Dark mode is the canonical surface. Bg ascends from deep to elevated. */
  --bg-0: #07080B;            /* canvas — page bg */
  --bg-1: #0C0E13;            /* primary surface */
  --bg-2: #14171E;            /* card / elevated */
  --bg-3: #1B1F28;            /* hover / popover */
  --bg-4: #242935;            /* pressed / tooltip */

  --line-1: #1E232D;          /* hairline divider */
  --line-2: #2A3140;          /* default border */
  --line-3: #3A4252;          /* strong border */

  --fg-1: #F4F6FA;            /* primary text */
  --fg-2: #B6BDC9;            /* secondary text */
  --fg-3: #828B9B;            /* tertiary / meta */
  --fg-4: #5A6273;            /* disabled / placeholder */
  --fg-inverse: #0C0E13;      /* on-light text */

  /* ============== COLOR: semantic ============== */
  --accent: var(--brand-cyan);
  --accent-fg: #061520;       /* on bright cyan */
  --success: #4ADE80;
  --warning: #F5B544;
  --danger:  #F26B6B;
  --info:    var(--brand-cyan);

  /* Transparent overlays — for glass surfaces / scrims */
  --glass-1: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.07);
  --glass-stroke: rgba(255,255,255,0.08);

  --scrim-light: rgba(7,8,11,0.55);
  --scrim-heavy: rgba(7,8,11,0.82);

  /* ============== Elevation ============== */
  --shadow-xs: 0 1px 0 rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.32);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.3);
  --shadow-glow-lime: 0 0 24px rgba(149,208,46,0.35);
  --shadow-glow-cyan: 0 0 32px rgba(31,162,222,0.32);
  --inset-hairline-top: inset 0 1px 0 rgba(255,255,255,0.06);
  --inset-hairline-bot: inset 0 -1px 0 rgba(0,0,0,0.6);

  /* ============== Radii ============== */
  --r-2: 2px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-12: 12px;
  --r-16: 16px;
  --r-20: 20px;
  --r-24: 24px;
  --r-pill: 999px;

  /* ============== Spacing (4pt base) ============== */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ============== Motion ============== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* signature ease — used for entrances */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
  --dur-flow: 900ms; /* infinity-loop motion */
}

/* ===== Light-mode override (used sparingly; brand canonicalizes dark) ===== */
.theme-light, [data-theme="light"] {
  --bg-0: #FAFBFC;
  --bg-1: #FFFFFF;
  --bg-2: #F4F6F9;
  --bg-3: #EAEEF3;
  --bg-4: #DDE3EB;
  --line-1: #ECEFF3;
  --line-2: #D9DEE6;
  --line-3: #B6BDC9;
  --fg-1: #0C0E13;
  --fg-2: #3A4252;
  --fg-3: #5A6273;
  --fg-4: #828B9B;
  --fg-inverse: #FFFFFF;
  --glass-1: rgba(12,14,19,0.04);
  --glass-2: rgba(12,14,19,0.07);
  --glass-stroke: rgba(12,14,19,0.08);
  --shadow-xs: 0 1px 0 rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.06);
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 2px 6px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-lg: 0 24px 60px rgba(15,23,42,0.14), 0 8px 18px rgba(15,23,42,0.08);
}

/* ===== Semantic text styles ===== */
html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-0); }
body { font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; }

.t-display {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  font-weight: var(--fw-semi);
}
.t-h1 {
  font-size: clamp(2rem, 3.5vw, var(--fs-56));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  font-weight: var(--fw-semi);
}
.t-h2 {
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-heading);
  font-weight: var(--fw-semi);
}
.t-h3 {
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-heading);
  font-weight: var(--fw-semi);
}
.t-h4 {
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-heading);
  font-weight: var(--fw-medium);
}
.t-lead {
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-body);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}
.t-body {
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-body);
  color: var(--fg-2);
}
.t-small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.t-micro {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.t-eyebrow {
  font-size: var(--fs-12);
  line-height: 1.2;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  letter-spacing: var(--tr-mono);
  color: var(--fg-2);
}

/* Gradient text helper — for the rare hero word, not paragraph copy */
.t-gradient {
  background: var(--brand-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}