@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");


/* ============================================================
   DVX — Data Verified Exchange
   Design System V2 Tokens
   Source: /assets/designSystemV2/project/colors_and_type.css

   This file is the authoritative token sheet for every app in
   the monorepo. Apps `@import` it once in their root layout and
   consume CSS variables directly.

   Compatibility note: legacy aliases (`--paper`, `--ink-900`,
   `--accent-600`, `--field-200`, etc) are mapped to DVX-V2
   equivalents at the bottom of this file so that apps written
   against the previous (RefiHawk amber/paper) palette keep
   rendering without breaking — just on the new DVX brand.
   ============================================================ */
:root {
  /* ---- DVX brand blue ---- */
  --dvx-blue-900: #122a4b;
  --dvx-blue-800: #173863;
  --dvx-blue-700: #2455a0;
  --dvx-blue-600: #3d7ecf;
  --dvx-blue-500: #3d7ecf;
  --dvx-blue-400: #4f8bd6;
  --dvx-blue-300: #8db5e3;
  --dvx-blue-200: #c0d6ef;
  --dvx-blue-100: #dde9f6;
  --dvx-blue-50:  #eef4fc;

  /* ---- DVX electric accent ---- */
  --dvx-accent-700: #0056b3;
  --dvx-accent-600: #0066d6;
  --dvx-accent-500: #007aff;
  --dvx-accent-400: #338fff;
  --dvx-accent-200: #b3d4ff;
  --dvx-accent-50:  #e6f1ff;

  /* ---- DVX neutrals ---- */
  --dvx-ink-900:   #0e1a2b;
  --dvx-ink-800:   #1a2740;
  --dvx-ink-700:   #2a3855;
  --dvx-ink-600:   #3f4d6b;
  --dvx-ink-500:   #6b7c93;
  --dvx-ink-400:   #8a99b1;
  --dvx-ink-300:   #b2bccd;
  --dvx-ink-200:   #d4dce8;
  --dvx-ink-150:   #e3e8f0;
  --dvx-ink-100:   #eef1f6;
  --dvx-ink-50:    #f7f9fc;

  --dvx-canvas:    #f4f7fb;
  --dvx-surface:   #ffffff;
  --dvx-overlay:   rgba(20, 36, 64, 0.40);

  /* ---- DVX semantic ---- */
  --dvx-positive-700: #166848;
  --dvx-positive-500: #1f8a5b;
  --dvx-positive-100: #d9efe4;
  --dvx-positive-50:  #ecf7f1;

  --dvx-watch-700:    #8a5a18;
  --dvx-watch-500:    #b7791f;
  --dvx-watch-100:    #f5e6c8;
  --dvx-watch-50:     #fbf3e0;

  --dvx-distress-700: #8a2c37;
  --dvx-distress-500: #b23a48;
  --dvx-distress-100: #f3d4d8;
  --dvx-distress-50:  #faeaec;

  /* Favorite/bookmark gold — used for filled star/bookmark icons.
     Subdued enough to mesh with the navy palette without breaking the
     conservative DVX feel. */
  --dvx-gold-700: #8a6418;
  --dvx-gold-500: #c89028;
  --dvx-gold-400: #d8a548;

  /* ---- DVX semantic roles ---- */
  --fg-1:        var(--dvx-ink-900);
  --fg-2:        var(--dvx-ink-700);
  --fg-3:        var(--dvx-ink-500);
  --fg-4:        var(--dvx-ink-400);
  --fg-inverse:  #ffffff;
  --fg-brand:    var(--dvx-blue-600);
  --fg-link:     var(--dvx-accent-500);

  --bg-canvas:   var(--dvx-canvas);
  --bg-surface:  var(--dvx-surface);
  --bg-raised:   #ffffff;
  --bg-sunken:   var(--dvx-ink-50);
  --bg-hover:    var(--dvx-blue-50);
  --bg-active:   var(--dvx-blue-100);
  --bg-brand:    var(--dvx-blue-600);
  --bg-brand-strong: var(--dvx-blue-800);

  --border-1:    var(--dvx-ink-150);
  --border-2:    var(--dvx-ink-200);
  --border-strong: var(--dvx-ink-300);
  --border-brand: var(--dvx-blue-600);
  --focus-ring:  var(--dvx-accent-500);

  /* ---- Type families ---- */
  --font-sans:   "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-serif:  "IBM Plex Serif", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* DVX explicit type scale */
  --t-display-1-size: 56px;
  --t-display-1-line: 1.08;
  --t-display-1-track: -0.02em;

  --t-display-2-size: 40px;
  --t-display-2-line: 1.12;
  --t-display-2-track: -0.015em;

  --t-h1-size: 32px;
  --t-h1-line: 1.18;
  --t-h1-track: -0.01em;

  --t-h2-size: 24px;
  --t-h2-line: 1.25;
  --t-h2-track: -0.005em;

  --t-h3-size: 18px;
  --t-h3-line: 1.33;

  --t-h4-size: 15px;
  --t-h4-line: 1.4;

  --t-body-size: 14px;
  --t-body-line: 1.5;

  --t-body-lg-size: 16px;
  --t-body-lg-line: 1.55;

  --t-small-size: 13px;
  --t-small-line: 1.45;

  --t-caption-size: 12px;
  --t-caption-line: 1.4;
  --t-caption-track: 0.01em;

  --t-eyebrow-size: 11px;
  --t-eyebrow-line: 1.3;
  --t-eyebrow-track: 0.12em;

  --t-mono-size: 13px;
  --t-mono-line: 1.45;

  /* Legacy type-scale aliases (matches old fs-* shorthand) */
  --fs-xs:    11px;
  --fs-sm:    12px;
  --fs-base:  14px;
  --fs-md:    15px;
  --fs-lg:    16px;
  --fs-xl:    20px;
  --fs-2xl:   24px;
  --fs-3xl:   32px;
  --fs-4xl:   40px;
  --fs-5xl:   48px;
  --fs-6xl:   56px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;

  /* ---- Spacing (4px base) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  48px;     /* alias retained for legacy code */
  --space-8:  32px;
  --space-9:  96px;     /* alias retained for legacy code */
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radii ---- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-pill: 999px;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(20, 36, 64, 0.06);
  --shadow-md: 0 6px 16px -4px rgba(20, 36, 64, 0.10), 0 2px 4px rgba(20, 36, 64, 0.05);
  --shadow-lg: 0 24px 48px -12px rgba(20, 36, 64, 0.18), 0 6px 12px -4px rgba(20, 36, 64, 0.08);
  --shadow-focus: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--focus-ring);
  --shadow-inset: inset 0 1px 2px rgba(20, 36, 64, 0.12);

  --shadow-pop: var(--shadow-md);
  --shadow-row: inset 0 -1px 0 var(--border-1);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease: var(--ease-out);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 240ms;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;

  /* ---- Layout ---- */
  --app-rail-w:   240px;
  --app-topbar-h: 56px;
  --app-detail-w: 360px;
  --max-content:  1440px;
}
/* ============================================================
   Legacy variable aliases (RefiHawk amber/paper palette)
   Mapped onto DVX V2 so older app surfaces continue to render
   while the rebrand is rolling out.
   ============================================================ */
:root {
  --ink-900: var(--dvx-ink-900);
  --ink-800: var(--dvx-ink-800);
  --ink-700: var(--dvx-ink-700);

  --paper:    #ffffff;
  --paper-2:  var(--dvx-canvas);

  --field-50:  var(--dvx-ink-50);
  --field-100: var(--dvx-ink-100);
  --field-200: var(--dvx-ink-150);
  --field-300: var(--dvx-ink-200);
  --field-400: var(--dvx-ink-300);
  --field-500: var(--dvx-ink-500);
  --field-600: var(--dvx-ink-600);
  --field-700: var(--dvx-ink-700);
  --field-800: var(--dvx-ink-800);
  --field-900: var(--dvx-ink-900);

  --accent-50:  var(--dvx-blue-50);
  --accent-100: var(--dvx-blue-100);
  --accent-200: var(--dvx-blue-200);
  --accent-400: var(--dvx-blue-400);
  --accent-600: var(--dvx-blue-600);
  --accent-700: var(--dvx-blue-700);
  --accent-900: var(--dvx-blue-900);

  --ok-50:    var(--dvx-positive-50);
  --ok-600:   var(--dvx-positive-500);
  --ok-700:   var(--dvx-positive-700);

  --alert-50:  var(--dvx-distress-50);
  --alert-600: var(--dvx-distress-500);
  --alert-700: var(--dvx-distress-700);

  --info-50:   var(--dvx-blue-50);
  --info-600:  var(--dvx-blue-600);
  --info-700:  var(--dvx-blue-700);

  --bg:           var(--bg-surface);
  --bg-subtle:    var(--bg-canvas);
  --bg-inverse:   var(--dvx-ink-900);

  --fg:           var(--fg-1);
  --fg-muted:     var(--fg-2);
  --fg-subtle:    var(--fg-3);

  --border:       var(--border-1);
  --border-strong-color: var(--border-strong);
  --border-hair:   1px solid var(--border-1);

  --brand:        var(--dvx-blue-600);
  --brand-hover:  var(--dvx-blue-700);
  --brand-soft:   var(--dvx-blue-50);
}
/* ============================================================
   Base / reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-surface);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* ============================================================
   Semantic type classes — DVX V2
   ============================================================ */
.t-display-1, .display-xl, h1.display-xl {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--t-display-1-size);
  line-height: var(--t-display-1-line);
  letter-spacing: var(--t-display-1-track);
  color: var(--fg-1);
  margin: 0;
}
.t-display-2, .display, h1.display {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--t-display-2-size);
  line-height: var(--t-display-2-line);
  letter-spacing: var(--t-display-2-track);
  color: var(--fg-1);
  margin: 0;
}
.t-h1, h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-line);
  letter-spacing: var(--t-h1-track);
  color: var(--fg-1);
  margin: 0;
}
.t-h2, h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-line);
  letter-spacing: var(--t-h2-track);
  color: var(--fg-1);
  margin: 0;
}
.t-h3, h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-line);
  color: var(--fg-1);
  margin: 0;
}
.t-h4, h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-line);
  color: var(--fg-1);
  margin: 0;
}
p, .p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.t-body-lg, .lead {
  font-family: var(--font-sans);
  font-size: var(--t-body-lg-size);
  line-height: var(--t-body-lg-line);
  color: var(--fg-2);
}
small, .small, .t-small {
  font-size: var(--t-small-size);
  line-height: var(--t-small-line);
  color: var(--fg-2);
}
.t-caption {
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-line);
  letter-spacing: var(--t-caption-track);
  color: var(--fg-3);
}
.eyebrow, .t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--t-eyebrow-track);
  text-transform: uppercase;
  color: var(--fg-3);
}
code, .code, .mono, .t-mono, .t-data {
  font-family: var(--font-mono);
  font-size: var(--t-mono-size);
  line-height: var(--t-mono-line);
  font-feature-settings: "tnum", "zero";
}
.num, .tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
/* ============================================================
   Utility classes
   ============================================================ */
.fg-muted   { color: var(--fg-2); }
.fg-subtle  { color: var(--fg-3); }
.fg-brand   { color: var(--fg-brand); }
.fg-ok      { color: var(--dvx-positive-500); }
.fg-alert   { color: var(--dvx-distress-500); }
.bg-paper    { background: #ffffff; }
.bg-paper-2  { background: var(--dvx-canvas); }
.bg-ink      { background: var(--dvx-ink-900); color: #ffffff; }
/* Smooth theme transitions */
html, body {
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}