@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);
  --bg-topbar:   rgba(255, 255, 255, 0.92);

  --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;
}
/* ============================================================
   DVX dark theme — engaged when <html data-theme="dark">

   Inverts the canvas/surface/ink scales onto a deep navy
   foundation so the new DVX palette holds together as a
   single, intentional dark theme. Brand blues stay
   recognizable; electric accent brightens for legibility.

   Overrides land on the DVX root tokens, which the semantic
   role tokens (--fg-1, --bg-canvas, etc) and the legacy
   aliases (--paper, --field-*, --accent-*) further down
   inherit through `var()` automatically. Tokens that are
   hardcoded literals (not `var()`) are re-declared below.
   ============================================================ */
html[data-theme="dark"] {
  /* ---- Surface foundation (deep navy) ---- */
  --dvx-canvas:    #0a1626;
  --dvx-surface:   #0e1a2b;
  --dvx-overlay:   rgba(2, 7, 16, 0.65);

  /* ---- DVX neutrals — inverted ink scale ----
     Light-mode #0e1a2b (darkest) → dark-mode #f7f9fc (lightest),
     and so on, so existing `var(--dvx-ink-900)` callers keep
     meaning "strongest foreground". */
  --dvx-ink-900:   #f7f9fc;
  --dvx-ink-800:   #eef1f6;
  --dvx-ink-700:   #d4dce8;
  --dvx-ink-600:   #b2bccd;
  --dvx-ink-500:   #8a99b1;
  --dvx-ink-400:   #6b7c93;
  --dvx-ink-300:   #3f4d6b;
  --dvx-ink-200:   #2a3855;
  --dvx-ink-150:   #1f2c45;
  --dvx-ink-100:   #18253c;
  --dvx-ink-50:    #122237;

  /* ---- DVX brand blue ----
     Keep the mid blues vivid (they read as brand against navy).
     Invert the very-pale-blue tints (50/100) into deep blue
     surfaces for hover/active backgrounds. */
  --dvx-blue-900:  #dde9f6;
  --dvx-blue-800:  #c0d6ef;
  --dvx-blue-700:  #4f8bd6;
  --dvx-blue-600:  #3d7ecf;
  --dvx-blue-500:  #3d7ecf;
  --dvx-blue-400:  #2455a0;
  --dvx-blue-300:  #173863;
  --dvx-blue-200:  #122a4b;
  --dvx-blue-100:  #15263f;
  --dvx-blue-50:   #11203b;

  /* ---- DVX electric accent — slightly lifted for dark ---- */
  --dvx-accent-700: #338fff;
  --dvx-accent-600: #4d9eff;
  --dvx-accent-500: #66adff;
  --dvx-accent-400: #007aff;
  --dvx-accent-200: #0056b3;
  --dvx-accent-50:  #1a2f4d;

  /* ---- DVX semantic — dark-adapted ----
     500-band tones brighten for legibility on dark; 50/100
     surfaces invert into deep-tinted backgrounds. */
  --dvx-positive-700: #4ed599;
  --dvx-positive-500: #2bba7d;
  --dvx-positive-100: #18382a;
  --dvx-positive-50:  #11221b;

  --dvx-watch-700:    #f1c069;
  --dvx-watch-500:    #d99a3c;
  --dvx-watch-100:    #3a2c10;
  --dvx-watch-50:     #20180a;

  --dvx-distress-700: #f5a3ad;
  --dvx-distress-500: #e16774;
  --dvx-distress-100: #3a151c;
  --dvx-distress-50:  #1f0c0f;

  --dvx-gold-700:  #d8a548;
  --dvx-gold-500:  #c89028;
  --dvx-gold-400:  #8a6418;

  /* ---- Semantic roles re-pointed at dark-friendly tones ----
     These are pure remaps; the rest of the semantic-role
     block at :root cascades through unchanged. */
  --fg-inverse:    #0e1a2b;
  --fg-brand:      #4f8bd6;
  --fg-link:       #66adff;

  --bg-raised:     #15243a;
  --bg-sunken:     #06101e;
  --bg-hover:      #15243a;
  --bg-active:     #1a2c47;
  --bg-topbar:     rgba(14, 26, 43, 0.92);

  --border-1:      #1f2c45;
  --border-2:      #2a3855;
  --border-strong: #3f4d6b;
  --border-brand:  #4f8bd6;
  --focus-ring:    #66adff;

  /* ---- Shadows — boost alpha so they read on dark ---- */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.55);
  --shadow-md:    0 6px 16px -4px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 24px 48px -12px rgba(0, 0, 0, 0.65), 0 6px 12px -4px rgba(0, 0, 0, 0.45);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.55);
}
/* Legacy aliases on dark — the `var(...)`-backed aliases
   automatically pick up the dark DVX tokens above; only the
   hardcoded literals in the legacy block need re-declaring. */
html[data-theme="dark"] {
  --paper:        #0e1a2b;
}
/* ============================================================
   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);
}