/* Stockfly — generated from tokens.json */
:root, [data-theme="dark"] {
  --brand: #2a7b6f; /* Logo ink: the three tiles and the plus of the mark (3.1:1 on bg-elev: graphics only, never text). Brand surfaces only, never a market value (up is its own token). */
  --brand-tint: #d6e8e4; /* Logo tint: the fourth tile behind the plus. Never text on bg (too light for a meaning). */
  --bg: #030712; /* Page background behind the widget grid. */
  --bg-elev: #1d232a; /* Widget frames, cards, popups, bottom sheets. */
  --bg-hover: #232a33; /* Hover and inactive chip / button backgrounds on bg-elev. */
  --line: #2b3340; /* Hairlines, frame borders, table rules, input borders. */
  --fg: #e8e8e9; /* Primary text and numbers on bg / bg-elev. */
  --fg-muted: #99a1af; /* Labels, secondary text on bg / bg-elev. */
  --fg-faint: #6a7282; /* Captions, axis labels, disabled. 4.2:1 on bg, 3.3:1 on bg-elev: decorative or labels beside a stronger value only, never the only carrier of a number. */
  --up: #089981; /* Up / tăng: text and numbers (price above reference, positive change, buy). Pair of down at the same OKLCH lightness. Contrast 5.6:1 on bg, 4.4:1 on bg-elev: just under AA for small text on widgets (source value kept, flagged); fine at 24px+ and for marks. */
  --up-line: #23b095; /* Up chart strokes (candle borders, wicks, lines). */
  --up-fill: #028f78; /* Up large marks: candle bodies, bars, bubbles, heatmap cells (opacity carries strength). */
  --down: #cc5a5b; /* Down / giảm: text and numbers. Balanced to up (red chroma at most 1.3x the green's), not TradingView's #f23645. Contrast 5.0:1 on bg, 3.9:1 on bg-elev: below AA for small text on widgets (source value kept, flagged); fine at 24px+ and for marks. */
  --down-line: #e86c6c; /* Down chart strokes. */
  --down-fill: #bf5454; /* Down large marks. */
  --flat: #fbbf24; /* Đứng / tham chiếu: unchanged price, reference price. */
  --flat-fill: #b8891f; /* Unchanged large marks. */
  --ceil: #e879f9; /* Trần: a price at the session's ceiling (board convention). */
  --ceil-fill: #b84fc9; /* Ceiling cells (heatmap, cards). */
  --floor: #15bdfc; /* Sàn: a price at the session's floor. Sky cyan (OKLCH hue 232), kept away from up's hue. */
  --floor-fill: #028cbc; /* Floor cells. */
  --sel: #2563eb; /* Selected state (active tab, toggle) as a solid background with white text. Carries no market meaning. */
  --sel-fg: #60a5fa; /* Selected text on a sel tint (bg-sel/20). */
  --warn: #f59e0b; /* Warnings, VPS target, MA200 marker. */
  --info: #a78bfa; /* Informational accents, MA20 marker, khối ngoại series. */
  --teal: #2dd4bf; /* UI accent (focus ring, primary button). Not a market colour since 2026-10-05 (up is #089981). */
}
:root {
  --space-1: 4px; /* Gap between chips and toolbar buttons. */
  --space-2: 8px; /* Widget inner padding (x), gaps in grids. */
  --space-3: 12px; /* Section gaps inside a widget. */
  --space-4: 16px; /* Phone side gutter, popup padding. */
  --radius-sm: 4px; /* Chips, tags, small buttons. */
  --radius-md: 6px; /* Toolbar buttons, inputs. */
  --radius-lg: 8px; /* Widget frames, cards, popups (--radius 0.5rem). */
  --radius-tile: 12px; /* Logo tiles: about a fifth of a tile's side (the mark draws 200px tiles with 40px corners). */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-num: Geist, "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  --text-text-2xs: 500 11px/1.35 var(--font-sans); /* The floor: axis labels, captions, chips. Nothing smaller. */
  --text-text-xs: 500 12px/1.4 var(--font-sans); /* Secondary lines, tooltips, popup detail. */
  --text-text-body: 400 13px/1.4 var(--font-sans); /* Running text of a widget. */
  --text-text-sm: 600 14px/1.4 var(--font-sans); /* Key values, table numbers. */
  --text-label-caps: 600 12px/1.2 var(--font-sans); /* Uppercase field labels (MỞ, CAO, THẤP), letter-spacing 0.025em. */
  --text-num-price: 700 26px/1 var(--font-num); /* The header price, tabular figures, coloured by its board tone. */
  --text-num-value: 600 13px/1.3 var(--font-num); /* Numbers in widgets (tabular figures). */
  --text-symbol: 900 30px/1 var(--font-num); /* The stock code in the Mã widget (gradient pink to violet in the app). */
}
.text-2xs {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0;
}
.text-xs {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
}
.text-body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.text-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
}
.label-caps {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}
.num-price {
  font-family: var(--font-num);
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}
.num-value {
  font-family: var(--font-num);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
}
.symbol {
  font-family: var(--font-num);
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-ext-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-ext-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-ext-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-vietnamese-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}