/* =========================================================
   Fabits Design System — Colors & Type
   Editorial Financial Storytelling
   ========================================================= */

/* Webfonts: IBM Plex Sans (display) + Inter (body) loaded from local files
   + Newsreader (editorial serif accent) + JetBrains Mono.                 */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-VariableFont_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============ BLUE (Primary scale) ============ */
  --blue-50:  #ebf1ff;
  --blue-100: #dbe4ff;
  --blue-200: #beccff;
  --blue-300: #97aaff;
  --blue-400: #6e7aff;
  --blue-500: #4c4eff;
  --blue-600: #2818ff;   /* Fabits Blue — the signal */
  --blue-700: #3120e2;
  --blue-800: #281db6;
  --blue-900: #25208f;
  --blue-950: #181353;

  /* ============ ULTRAMARINE ============ */
  --ultramarine-50:  #f1f4ff;
  --ultramarine-500: #413fff;
  --ultramarine-600: #2818ff;
  --ultramarine-700: #1707fa;
  --ultramarine-900: #131169;
  --ultramarine-950: #040313;

  /* ============ ELECTRIC LIME (Accent / highlight) ============ */
  --lime-50:  #fbffe6;
  --lime-200: #ebfc9a;
  --lime-300: #d4f54d;     /* Marker highlight */
  --lime-400: #c4eb30;
  --lime-500: #a6d111;
  --lime-700: #617f0c;
  --lime-900: #415512;

  /* ============ VULCAN (Neutral) ============ */
  --vulcan-50:  #f6f6f9;   /* Page bg */
  --vulcan-100: #ececf2;
  --vulcan-200: #d5d6e2;
  --vulcan-300: #b0b2c9;
  --vulcan-400: #8588ab;
  --vulcan-500: #656992;
  --vulcan-600: #515478;
  --vulcan-700: #424462;
  --vulcan-800: #393a53;
  --vulcan-900: #333447;
  --vulcan-950: #1a1a24;

  /* ============ Core ============ */
  --black: #040313;        /* Brand black — slightly blue */
  --white: #ffffff;
  --paper: #f6f6f9;        /* Vulcan 50 — editorial page */

  /* ============ Semantic ============ */
  --bg:           var(--paper);
  --bg-elevated: var(--white);
  --bg-inverse:  var(--black);

  --fg:    var(--black);
  --fg-1:  var(--black);
  --fg-2:  var(--vulcan-700);
  --fg-3:  var(--vulcan-500);
  --fg-4:  var(--vulcan-400);
  --fg-on-dark: var(--white);
  --fg-on-blue: var(--white);

  --accent:        var(--blue-600);
  --accent-hover:  var(--blue-700);
  --accent-soft:   var(--blue-50);
  --highlight:     var(--lime-300);    /* Marker / pull-quote */

  --border:        var(--vulcan-200);
  --border-strong: var(--vulcan-300);
  --rule:          var(--black);

  /* ============ Typography ============ */
  --font-sans:     "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:    "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-mono:     "JetBrains Mono", "IBM Plex Mono", monospace;
  --font-display:  "IBM Plex Sans", "Inter", system-ui, sans-serif;

  /* Type scale — editorial, generous */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  --lh-tight: 1.04; /* @kind other */
  --lh-snug:  1.15; /* @kind other */
  --lh-base:  1.5;  /* @kind other */
  --lh-loose: 1.7;  /* @kind other */

  --tracking-display: -0.025em;
  --tracking-tight:   -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.14em;

  /* ============ Spacing ============ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ============ Radii — restrained ============ */
  --r-0:    0;       /* @kind radius */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;

  /* ============ Borders ============ */
  --bw-hairline: 1px;
  --bw-rule:     1.5px;
  --bw-strong:   2px;

  /* ============ Shadows — quiet & flat ============ */
  --shadow-xs: 0 1px 2px rgba(4,3,19,0.04);
  --shadow-sm: 0 1px 3px rgba(4,3,19,0.06), 0 1px 2px rgba(4,3,19,0.04);
  --shadow-md: 0 6px 24px rgba(4,3,19,0.06);
  --shadow-lg: 0 16px 48px rgba(4,3,19,0.10);
  --shadow-blue: 0 8px 24px rgba(40,24,255,0.18);

  /* ============ Motion ============ */
  --ease:      cubic-bezier(0.2, 0.6, 0.2, 1);  /* @kind other */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --dur-fast:  120ms; /* @kind other */
  --dur:       200ms; /* @kind other */
  --dur-slow:  400ms; /* @kind other */
}

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

/* =========================================================
   Semantic type roles
   ========================================================= */

/* Massive editorial display — magazine cover voice */
.fb-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-wrap: balance;
}

.fb-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}

.fb-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.fb-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.fb-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
}

/* Editorial serif — for pull quotes, essay leads */
.fb-serif-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-48);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.fb-serif-lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-24);
  line-height: 1.45;
  color: var(--fg-2);
}

/* Body */
.fb-body  { font-size: var(--fs-16); line-height: var(--lh-base);  color: var(--fg-1); }
.fb-body-lg { font-size: var(--fs-18); line-height: var(--lh-base); color: var(--fg-1); }
.fb-small { font-size: var(--fs-14); line-height: var(--lh-base);  color: var(--fg-2); }
.fb-caption { font-size: var(--fs-13); line-height: 1.45; color: var(--fg-3); }

/* Eyebrow / kicker — magazine section labels */
.fb-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* All-caps wide label — used in posters / hero */
.fb-label-caps {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Mono — figures, tickers */
.fb-mono { font-family: var(--font-mono); font-size: var(--fs-14); letter-spacing: 0; }

/* Marker highlight — the lime swipe behind key phrases */
.fb-highlight {
  background: var(--highlight);
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Underline accent — lime under a word */
.fb-underline-lime {
  background-image: linear-gradient(var(--highlight), var(--highlight));
  background-size: 100% 0.32em;
  background-repeat: no-repeat;
  background-position: 0 88%;
}

/* The signal — blue word inside a sentence */
.fb-signal { color: var(--accent); }