/* BTF, Bag Traded Funds: the stock market for Solana, a fund factsheet printed on a dark ground, in MONEY GREEN since
   2026-11-07 (the user picked the Money Green bag: "very eye catching and simple, similar to the original PTF PFP"): a cool
   near-black ground with a hint of green, mint-white ink, Money Green (emerald to lime) for the action (the gradient on the
   main keys with dark text, bright green for links, the selected state green with dark text), the market's green and red,
   gold for IPOs and "soon", and one colour per kind of asset, used only in a fund's allocation bar. The hero's quote card and
   the closing band sit a step higher (base.css .night). The logo is the green bag on a WHITE tile (web/js/logo.mjs). Every
   colour lives here; base.css and ptf.css only read tokens. The *-rgb channels are for translucent tints:
   rgba(var(--up-rgb), 0.1). Earlier palettes: brand/before-green-20261107/web/tokens.css (BullStreet dark bronze) and
   brand/before-bullstreet-20261106/tokens-solana.css (Solana colours). Contrast on the ground (checked 2026-11-07): ink 17.7,
   ink-2 13.3, muted 7.7, links 12.2, up 9.8, down 5.8, gold 13.9; dark text on the green keys 6.1 to 14.3. */
:root {
  color-scheme: dark;

  /* the brand: Money Green. The names stay --sol-* (the old Solana tokens) so every rule that reads them keeps working */
  --sol-purple: #1fd17a;
  --sol-green: #2fd07f;
  --sol-grad: linear-gradient(100deg, #00a86b 0%, #14c477 34%, #3ddc84 62%, #b6f35c 100%);
  /* the same gradient a step lighter, for words on the dark ground (the headline's second beat) */
  --sol-grad-text: linear-gradient(90deg, #2fd88a 0%, #7fe98b 50%, #c4f57a 100%);

  /* the ground, panels and wells: wells and inputs sit darker than the ground, panels lighter; cool with a hint of green */
  --bg-rgb: 9, 12, 10;
  --bg-2-rgb: 5, 7, 6;
  --surface-rgb: 17, 22, 19;
  --surface-2-rgb: 23, 30, 26;
  --bg: rgb(var(--bg-rgb));
  --bg-2: rgb(var(--bg-2-rgb));
  --surface: rgb(var(--surface-rgb));
  --surface-2: rgb(var(--surface-2-rgb));
  --surface-3: #202a24;
  --paper: var(--surface);

  /* hairlines, in the ink */
  --line-rgb: 236, 245, 238;
  --line: rgba(var(--line-rgb), 0.08);
  --line-2: rgba(var(--line-rgb), 0.14);
  --line-3: rgba(var(--line-rgb), 0.26);

  /* text */
  --ink: #eef5ef;
  --ink-2: #cbd8cf;
  --muted: #95a69b;
  /* text on the light fills (a ticker chip, the gold highlight, a chosen quick pick) */
  --on-light: #07110b;

  /* the action: Money Green. The main keys (the main button, Connect) wear the gradient with dark text (--on-grad); solid
     green with dark text marks the selected state; focus rings and links are green too */
  --act-rgb: 31, 209, 122;
  --act: rgb(var(--act-rgb));
  --act-2: #4fe09a;
  --act-3: #0a7a4c;
  --act-ink: #5fe3a1;
  --act-soft: rgba(var(--act-rgb), 0.15);
  --on-act: #03150b;
  --on-grad: #03150b;

  /* the market: green up and buy, a warm red down and sell */
  --up-rgb: 47, 208, 127;
  --down-rgb: 242, 85, 93;
  --up: rgb(var(--up-rgb));
  --up-fill: #2fd07f;
  --up-edge: #1a8a52;
  --up-soft: rgba(var(--up-rgb), 0.13);
  --down: rgb(var(--down-rgb));
  --down-fill: #d93a4a;
  --down-edge: #8c1626;
  --down-soft: rgba(var(--down-rgb), 0.13);
  --on-up: #04170e;

  /* the highlight: IPOs, "soon" and demo, in gold (a fill with dark text; gold-ink for gold words on the dark) */
  --gold-rgb: 240, 199, 94;
  --gold: rgb(var(--gold-rgb));
  --gold-ink: #f5d68a;
  --gold-soft: rgba(var(--gold-rgb), 0.18);
  /* medals stay metal */
  --medal-gold: #f5c542;
  --medal-gold-ink: #f7d26b;

  /* what a fund holds, by kind: only in allocation bars, their keys and the asset board */
  --k-stock: #e2b54a;
  --k-preipo: #7aa7ff;
  --k-crypto: #2fd07f;
  --k-meme: #ef7fb6;
  --k-stable: #cbd8cf;

  /* the heatmap: red through cool graphite to green; flat tiles print in the ink, strong ones in white */
  --heat-up: #1d9a5e;
  --heat-mid: #19201c;
  --heat-down: #d93a4a;

  /* the raised dark cards */
  --night: #131a16;
  --night-2: #19221d;
  --night-3: #222c26;

  /* states */
  --good: var(--up);
  --bad: var(--down);
  --warn: var(--gold-ink);

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-text: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --display-weight: 600;
  --display-tracking: -0.022em;

  --r-sm: 7px;
  --r: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --border: 1px solid var(--line-2);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 30px -18px rgba(0, 0, 0, 0.7);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 48px -22px rgba(0, 0, 0, 0.85);
  /* the main button is a key: the green gradient, a lit top edge, a darker edge under it, a soft green glow, pressed on click */
  --key: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.24), 0 10px 26px -12px rgba(31, 209, 122, 0.7);
  --key-hover: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.24), 0 14px 32px -12px rgba(31, 209, 122, 0.85);
  --key-down: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 rgba(0, 0, 0, 0), 0 4px 12px -8px rgba(31, 209, 122, 0.55);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t: 240ms;

  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 64px;
}