/* ==========================================================================
   Trading OS — design tokens
   Satu-satunya tempat warna, tipografi, dan jarak didefinisikan.
   Mengubah arah visual cukup dilakukan di file ini.
   ========================================================================== */

:root {
  /* --- ground & permukaan --- */
  --bg:        #04060A;
  --bg-panel:  #080C12;
  --bg-raise:  #0C1119;
  --bg-hi:     #111823;

  /* --- garis --- */
  --grid:      #121A25;
  --grid-soft: #0D141D;
  --edge:      #1B2634;

  /* --- aksen (fosfor) --- */
  --amber:     #FFB454;
  --amber-dim: #8A6430;
  --cyan:      #5CD5E0;
  --cyan-dim:  #2C6E75;
  --violet:    #A78BFA;
  --violet-dim:#5B4E86;

  /* --- semantik: HANYA untuk arah harga & P/L --- */
  --up:        #3FD97F;
  --up-dim:    #1D5F3B;
  --down:      #FF5E52;
  --down-dim:  #6E2A25;

  /* --- teks --- */
  --tx-hi:     #E9F1F8;
  --tx:        #93A6B8;
  --tx-dim:    #4B5C6E;
  --tx-faint:  #2E3B49;

  /* --- tipografi --- */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
          "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --fs-xs:  9px;
  --fs-sm:  10px;
  --fs-md:  11.5px;
  --fs-base:12px;
  --fs-lg:  15px;
  --fs-xl:  23px;

  --ls-label: .22em;
  --ls-wide:  .14em;

  /* --- jarak --- */
  --sp-1: 4px;
  --sp-2: 7px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;

  /* --- ukuran tetap --- */
  --side-w:   208px;
  --tape-h:   30px;
  --ticket-w: 274px;
  --watch-w:  214px;
}

/* --------------------------------------------------------------------------
   Reset ringkas
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--mono);
  font-size: var(--fs-base);
  line-height: 1.5;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }

img, svg { display: block; max-width: 100%; }

table { width: 100%; border-collapse: collapse; }

:focus-visible { outline: 1px solid var(--amber); outline-offset: 1px; }

/* --------------------------------------------------------------------------
   Utilitas
   -------------------------------------------------------------------------- */

.num  { font-variant-numeric: tabular-nums; }

/* Kelas ganda disengaja: arah harga harus selalu mengalahkan warna komponen
   seperti .kpi__value atau .kv__v yang juga menetapkan warna teks. */
.up.up { color: var(--up); }
.dn.dn { color: var(--down); }
.glow { text-shadow: 0 0 14px rgba(255, 180, 84, .38); }
.r    { text-align: right; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}