/* ============================================================
   ONYX — Design Tokens
   Web3-native dark mode • institutional editorial discipline
   ============================================================ */

:root {
  /* ---------- Surfaces (warm near-black, layered) ---------- */
  --bg-000: #07070A;          /* page bg, deepest */
  --bg-100: #0B0B11;          /* default surface */
  --bg-200: #11111A;          /* cards */
  --bg-300: #181822;          /* elevated cards */
  --bg-400: #20202C;          /* popovers / modals */
  --bg-500: #2A2A38;          /* hover / pressed */

  /* hairlines */
  --line-100: rgba(255, 255, 255, 0.06);
  --line-200: rgba(255, 255, 255, 0.10);
  --line-300: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.28);

  /* ---------- Text ---------- */
  --text-100: #F5F4EE;        /* primary, warm white */
  --text-200: #D6D4CB;        /* secondary */
  --text-300: #9C9A91;        /* tertiary / muted */
  --text-400: #6B6A62;        /* disabled / caption */
  --text-500: #45443F;        /* placeholder */

  /* ---------- Brand accent (amber/gold) ---------- */
  --accent: #F5B544;
  --accent-hi: #FFC85C;
  --accent-lo: #B68220;
  --accent-dim: rgba(245, 181, 68, 0.14);
  --accent-line: rgba(245, 181, 68, 0.32);

  /* ---------- Signal palette ---------- */
  --pos: #5CE3A1;             /* positive / verified / live */
  --pos-dim: rgba(92, 227, 161, 0.14);
  --pos-line: rgba(92, 227, 161, 0.30);

  --neg: #FF5D5D;             /* watchlist / removed */
  --neg-dim: rgba(255, 93, 93, 0.12);
  --neg-line: rgba(255, 93, 93, 0.28);

  --warn: #FFB454;            /* under investigation */
  --warn-dim: rgba(255, 180, 84, 0.12);
  --warn-line: rgba(255, 180, 84, 0.32);

  --info: #6FA8FF;
  --info-dim: rgba(111, 168, 255, 0.12);

  /* ---------- Tier metallics (used by credibility badges) ---------- */
  --tier-certified-1: #FFD980;
  --tier-certified-2: #E69A24;
  --tier-certified-3: #7A4F12;

  --tier-verified-1: #E8ECF4;
  --tier-verified-2: #9AA3B2;
  --tier-verified-3: #4B5160;

  --tier-listed-1: #E0A06F;
  --tier-listed-2: #A36336;
  --tier-listed-3: #5A3416;

  /* ---------- Type ---------- */
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --fs-12: 11.5px;
  --fs-13: 12.5px;
  --fs-14: 13.5px;
  --fs-15: 14.5px;
  --fs-16: 15.5px;
  --fs-18: 17px;
  --fs-20: 19px;
  --fs-24: 23px;
  --fs-32: 30px;
  --fs-40: 38px;
  --fs-56: 54px;
  --fs-72: 70px;
  --fs-96: 92px;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.022em;
  --tracking-snug: -0.012em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-mono: -0.01em;

  /* ---------- Spacing scale ---------- */
  --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;

  /* ---------- Radius ---------- */
  --r-2: 2px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-full: 999px;

  /* ---------- Shadows / glows ---------- */
  --glow-accent: 0 0 0 1px var(--accent-line), 0 10px 40px -16px rgba(245, 181, 68, 0.45);
  --glow-pos: 0 0 0 1px var(--pos-line), 0 8px 30px -14px rgba(92, 227, 161, 0.5);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 48px -28px rgba(0,0,0,0.6);
  --shadow-pop: 0 30px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px var(--line-200);
}

/* ============================================================
   Base
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  background: var(--bg-000);
  color: var(--text-100);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

body {
  /* subtle vignette */
  background:
    radial-gradient(ellipse 1200px 700px at 50% -200px, rgba(245,181,68,0.05), transparent 60%),
    var(--bg-000);
  min-height: 100vh;
}

::selection { background: var(--accent-dim); color: var(--accent-hi); }

a { color: inherit; text-decoration: none; }

/* monospace utility */
.mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); font-feature-settings: "ss01", "zero", "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }
.uppercase-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-300);
  font-family: var(--font-mono);
}

/* dotted hairline divider */
.hairline { height: 1px; background: var(--line-100); border: 0; margin: 0; }
.hairline-strong { height: 1px; background: var(--line-200); border: 0; margin: 0; }

/* container widths */
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 980px; margin: 0 auto; padding: 0 32px; }