/* =====================================================================
   VT theme tokens  (source for /webflow/css/vt-tokens.css)
   ---------------------------------------------------------------------
   * Loaded on BOTH surfaces (mobileFrame/header.jsp and
     user2/user2Frame/header.jsp) only when ${vtTheme} is true.
   * Everything is scoped to html.vt. Names are namespaced:
       --vt-*   WTS / MTS  (reference = the vendor web, Limitless/Bootstrap 4, "white_box" mode)
       --vth-*  HTS web pages (reference = the vendor native HTS, DevExpress "Office 2019 Colorful")
     so they never collide with the legacy :root variables of
     plusasset.webflow.css / neo.css (those are re-mapped per surface in
     vt-mts-base.css / vt-hts-base.css, see spec.md section 6.0 / 7.0).
   * Evidence for every value: spec.md section 2 (file:line or screenshot pixel).
   * This file defines variables only. No selector here may style anything.
   ===================================================================== */

html.vt {

  /* ================= WTS / MTS  (--vt-*) ================= */

  /* ---- chrome: navy bars, menus ---- */
  --vt-navy-900: #0F202C;          /* top navbar, ☰ overlay, WTS sidebar, pager current, notice-popup bar */
  --vt-navy-800: #12202D;          /* dropdown / sub-menu panel on navy */
  --vt-navy-950: #0A151D;          /* hover background of navy links */
  --vt-navy-item-hover: #0E1B25;   /* hover background of dropdown items */
  --vt-navy-line: #25394E;         /* dividers / borders on navy */
  --vt-steel-700: #334D6E;         /* symbol/tab bar, bottom order bar */
  --vt-steel-800: #233D58;         /* active tab, active menu item */
  --vt-steel-line: #526C91;        /* dividers on the steel bars, outline of buttons on steel */
  --vt-slate-700: #324148;         /* notice/message tab (active fill, inactive outline) */
  --vt-slate-500: #607D8B;         /* timeline line and dots */

  /* ---- text on dark bars ---- */
  --vt-on-dark: #C2CDD7;           /* links, icons, inactive tabs */
  --vt-on-dark-hover: #99AABB;
  --vt-on-dark-strong: #FFFFFF;    /* active tab, names */
  --vt-on-dark-symbol: #E8ECF1;    /* selected symbol "F 202612" */

  /* ---- bottom order bar labels (MTS) ---- */
  --vt-bar-label: #D2E3FD;         /* default label (정정/취소 in the reference) */
  --vt-bar-limit: #EFABC0;         /* 지정가 */
  --vt-bar-market: #89CDF2;        /* 시장가 */
  --vt-bar-mit: #4CAF50;           /* MIT */
  --vt-bar-tpsl: #08A1F5;          /* 손/익절 */

  /* ---- content surfaces & text ---- */
  --vt-page: #FFFFFF;
  --vt-text: #333333;
  --vt-text-strong: #000000;       /* ladder prices */
  --vt-text-muted: #888888;        /* info labels, trading-table labels */
  --vt-text-faint: #999999;        /* captions, placeholders, disabled */
  --vt-text-pager: #898989;        /* inactive page numbers, prev/next */
  --vt-text-tab: #777777;          /* inactive login tab */
  --vt-surface: #F5F5F5;           /* cards, list headers, sheet info rows, "더 보기" */
  --vt-surface-th: #F7F7F7;        /* trading-table header row */
  --vt-surface-btn: #F9F9F9;       /* tick up/down stepper buttons */
  --vt-surface-stepper: #EFEFEF;   /* -/+ stepper buttons in order sheets */
  --vt-surface-light: #FAFAFA;     /* Limitless .btn-light face */
  --vt-border: #DEDEDE;            /* table/sheet/form borders (white_box) */
  --vt-border-input: #DDDDDD;      /* Limitless form-control / btn-light border */
  --vt-line-soft: #F0F0F0;         /* ladder column lines, list separators (decision D3) */
  --vt-hover: #F5F5F5;             /* row hover */
  --vt-hover-btn: #E8E8E8;         /* light button hover / selected row */

  /* ---- accents ---- */
  --vt-primary: #2196F3;           /* confirm buttons, focus, checked boxes */
  --vt-navy-btn: #0C2748;          /* login primary button */
  --vt-navy-btn-hover: #193E6B;
  --vt-link: #0C2748;
  --vt-link-hover: #28486F;
  --vt-badge: #FF7043;             /* bell counter badge */
  --vt-expander: #A5A5A5;          /* "+" expanders */
  --vt-btn-hover-danger: #FE5C5C;  /* light-button hover text/border (white_box .btn-light:hover) */
  --vt-status: #B26A00;            /* #loginStatus text on white (decision D21) */

  /* ---- up / down (Korean convention: red = buy/up, blue = sell/down) ---- */
  --vt-up: #F44336;
  --vt-down: #2196F3;

  /* ---- buttons ---- */
  --vt-btn-sell: #0083EA;
  --vt-btn-buy: #FE5C5C;
  --vt-btn-gray: #949A9F;          /* row action buttons (청산/취소 cells) */
  --vt-btn-disabled: #949AA2;
  --vt-btn-shade: rgba(0, 0, 0, .075);   /* hover = inset 999px shade (Limitless) */

  /* ---- ladder (WTS/MTS, 11 columns) ---- */
  --vt-lad-ask-price: rgba(33, 150, 243, .10);   /* price cells above current (.medo) */
  --vt-lad-bid-price: rgba(244, 67, 54, .10);    /* price cells below current (.mesu) */
  --vt-lad-ask-depth: #DAEDFE;     /* sell 건수/잔량 cells with data */
  --vt-lad-bid-depth: #FFDCDA;     /* buy 건수/잔량 cells with data */
  --vt-lad-mit-sell: #DBEEF4;      /* col 1  MIT 매도   (reference HTS palette, decision D3) */
  --vt-lad-limit-sell: #C0D9F1;    /* col 2  지정가 매도 */
  --vt-lad-limit-buy: #FCD5B5;     /* col 10 지정가 매수 */
  --vt-lad-mit-buy: #FDEADA;       /* col 11 MIT 매수 */
  --vt-lad-cur-bg: #FFFF00;        /* current price cell */
  --vt-lad-cur-text: #FF0000;
  --vt-lad-pos-sell: #0083EA;      /* own short position marker (white text) */
  --vt-lad-pos-buy: #FE5C5C;       /* own long position marker (white text) */
  --vt-lad-pos-text: #FFFFFF;
  --vt-lad-row-line: #FFFFFF;      /* row separators (reference: 1px white) */
  --vt-lad-col-line: #F0F0F0;      /* column separators */
  --vt-lad-cur-line: #DEDEDE;      /* 2px line under the current-price row */
  --vt-lad-hover-line: #334D6E;    /* hover outline of order/price cells */
  --vt-lad-price-hover: #FFF9C4;   /* hover fill of the price cell */
  --vt-lad-row-hover: #F7F7F7;

  /* ---- overlays & shadows ---- */
  --vt-overlay-sheet: rgba(0, 0, 0, .5);    /* bottom sheets */
  --vt-overlay-modal: rgba(0, 0, 0, .4);    /* alert-type popups */
  --vt-backdrop: rgba(0, 0, 0, .3);         /* desktop modal backdrop */
  --vt-shadow-menu: 0 .25rem .5rem rgba(0, 0, 0, .2);
  --vt-shadow-nav: 0 2px 3px rgba(0, 0, 0, .08);
  --vt-shadow-modal: 0 1px 4px rgba(0, 0, 0, .2);
  --vt-shadow-popup: 0 0 15px rgba(0, 0, 0, .2);
  --vt-shadow-sheet: 0 0 5px rgba(0, 0, 0, .5);

  /* ---- scrollbars ---- */
  --vt-scroll-thumb: rgba(0, 0, 0, .2);
  --vt-scroll-thumb-hover: rgba(0, 0, 0, .3);
  --vt-scroll-track: rgba(0, 0, 0, .1);
  --vt-scroll-track-soft: rgba(0, 0, 0, .04);   /* 16px gutters keep their width; see spec 6.1 */

  /* ---- focus & checkboxes ---- */
  --vt-focus: #2196F3;
  --vt-check-border: #999999;
  --vt-check-on: #2196F3;
  --vt-check-tp: #F44336;          /* 익절 */
  --vt-check-sl: #2196F3;          /* 손절 */
  --vt-check-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* ---- radii ---- */
  --vt-radius: 3px;                /* buttons, inputs, pager */
  --vt-radius-card: 5px;           /* cards, popups */
  --vt-radius-sheet: 3px 3px 0 0;  /* bottom sheets */
  --vt-radius-round: 50%;

  /* ---- typography ---- */
  --vt-font-num: 'VTNum';          /* digits-only face, defined by infra in vt-fonts.css (Gulim local() + free fallback) */
  --vt-font-text: 'Roboto', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --vt-font: 'VTNum', 'Roboto', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --vt-fw-regular: 400;
  --vt-fw-medium: 500;
  --vt-fw-strong: 600;             /* hard maximum - the owner does not want heavy bold */
  --vt-fs-title: 18px;             /* page / block titles */
  --vt-fs-body: 14px;
  --vt-fs-menu: 14.4px;            /* ☰ menu items (.9rem) */
  --vt-fs-control: 13px;           /* inputs, buttons, sheet text, volume cells */
  --vt-fs-small: 12px;             /* info labels, dates */
  --vt-fs-ladder-price: 13px;      /* our price column (reference 21px does not fit 24px rows) */

  /* ---- chart (TradingView light) ---- */
  --vt-chart-up: #F44336;          /* = BrandAdvice.VT_CHART_UP  "_F44336" */
  --vt-chart-down: #2196F3;        /* = BrandAdvice.VT_CHART_DOWN "_2196F3" */
  --vt-chart-pane: #FFFFFF;
  --vt-chart-grid: #F3F3F3;
  --vt-chart-scale-text: #333333;
  --vt-chart-scale-line: #DEDEDE;


  /* ================= HTS web pages  (--vth-*) ================= */

  /* ---- surfaces ---- */
  --vth-window: #F8F8F8;           /* skin "Control" = Paint: every non-trading window */
  --vth-trade-window: #F0F8FF;     /* TradeForm AliceBlue: order2 page, HTS shell frame */
  --vth-cell: #FFFFFF;             /* "Paint High": grid cells, editors */
  --vth-header: #F8F8F8;           /* grid header face */
  --vth-header-pressed: #E6E6E6;
  --vth-readonly: #F8F8F8;         /* ReadOnly = Paint */
  --vth-paint-shadow: #F0F0F0;
  --vth-paint-deep: #E6E6E6;

  /* ---- lines & text ---- */
  --vth-border: #ABABAB;           /* Brush Major: grid outer border, header borders, editor & button borders */
  --vth-grid: #D2D2D2;             /* Brush Minor: grid lines */
  --vth-text: #484644;             /* Brush: default text */
  --vth-text-header: #000000;      /* grid header text (bold) and the price column */
  --vth-text-disabled: #777777;    /* Brush Light */

  /* ---- accents & states ---- */
  --vth-accent: #106EBE;           /* Accent Paint (selected tab, focus) */
  --vth-accent-dark: #005A9E;
  --vth-select: #CDE6F7;           /* Highlight: selected / focused row */
  --vth-hot: #E6F2FA;              /* HotTracked: hover */
  --vth-sell: #106EBE;             /* FillColors.Primary: 시장가매도, sell-side 취소, short badge */
  --vth-buy: #E23642;              /* FillColors.Danger (altRed): 시장가매수, buy-side 취소, long badge */
  --vth-util: #1E8BCD;             /* FillColors.Question: 설정/차트/presets */
  --vth-btn-face: #FFFFFF;
  --vth-btn-border: #ABABAB;
  --vth-btn-text: #484644;
  --vth-up: #FF0000;               /* Color.Red */
  --vth-down: #0000FF;             /* Color.Blue */
  --vth-unread: #FFF4CC;           /* unread message row (decision D15) */

  /* ---- ladder (HTS, 11 columns) ---- */
  --vth-lad-ask-price: #D7E9FF;    /* price cells above current, and VolumeA cells with data */
  --vth-lad-bid-price: #FFE3E3;    /* price cells below current, and VolumeB cells with data */
  --vth-lad-ask-depth: #D7E9FF;
  --vth-lad-bid-depth: #FFE3E3;
  --vth-lad-mit-sell: #DBEEF4;     /* col 1 */
  --vth-lad-limit-sell: #C0D9F1;   /* col 2 */
  --vth-lad-limit-buy: #FCD5B5;    /* col 10 */
  --vth-lad-mit-buy: #FDEADA;      /* col 11 */
  --vth-lad-cur-bg: #FFFF00;
  --vth-lad-cur-text: #FF0000;
  --vth-lad-pos-text: #FFFFFF;     /* on --vth-buy (long) / --vth-sell (short) */

  /* ---- special cells ---- */
  --vth-info-label: #E6E6E6;       /* item-info label cells (quote table) */
  --vth-order-cell: #DCDCDC;       /* position "주문" cell (청산/취소), Gainsboro */
  --vth-status-ok: #00B42A;
  --vth-status-off: #ACACAC;

  /* ---- shape & type ---- */
  --vth-radius: 2px;
  --vth-font: var(--vt-font);      /* digits Gulim (VTNum), text clean (decision D6) */
  --vth-font-gulim: 'VTNum', 'Gulim', '굴림', 'GulimChe', '굴림체', 'Malgun Gothic', '맑은 고딕', sans-serif;  /* exact-reference alternative, not default */
  --vth-fs: 12px;                  /* Gulim 9pt */
  --vth-fw-header: 600;            /* reference "Gulim 9 bold", capped at 600 */

  /* ---- native shell (Phase 5 / HTS 1.0.3 only; for the C# agent, not CSS) ---- */
  --vth-tile-top: #FFFFFF;         /* main-bar tile gradient top */
  --vth-tile-bottom: #E1E7F0;      /* main-bar tile gradient bottom */
  --vth-tile-edge: #CDD8E4;
  --vth-tile-icon: #5F7BA1;
  --vth-tile-icon-light: #88B6E3;
  --vth-tile-label: #4B77A7;
  --vth-login-card: #E7E8EC;
  --vth-login-btn: #353535;
  --vth-login-btn2: #D9D9D9;
  --vth-login-small: #727272;
  --vth-login-link: #363636;
}