/* Царь Trading colours, mapped to the app's own variable names.
   Load after the kit's tokens.css and kit.css: the variables here replace the kit's values, and the rules at the end replace the blue that kit.css writes as literal colours.
   The kit resolves --tg-theme-* first, which would paint a client's own Telegram theme over the brand. Here the surfaces, text and accent are fixed to the brand, so they always work together. The app still picks light or dark from Telegram through data-theme.
   Contrast is checked by tools/check-contrast.mjs. */
:root {
  /* Brand colours, for the app's own use. */
  --gold-100: #fbedc0;
  --gold-300: #e7c477;
  --gold-500: #c49a3f;
  --gold-700: #7a5a12;
  --ink: #14110b;

  --sys-bg: #f5f2ea;
  --sys-card: #ffffff;
  --sys-text: #14110b;
  --sys-hint: rgba(64, 54, 34, .74);
  --sys-sep: rgba(84, 70, 40, .18);
  --sys-accent: #a67b1f;
  --sys-header: #f5f2ea;
  --fill: rgba(120, 104, 72, .12);
  --fill-strong: rgba(120, 104, 72, .22);
  --glass-tint: rgba(255, 253, 247, .62);
  --glass-edge: rgba(255, 255, 255, .7);
  --glass-line: rgba(40, 30, 10, .06);
  --lens: rgba(120, 104, 72, .14);
  --thumb: #ffffff;
  --coin-edge: rgba(40, 30, 10, .08);
  --scrim: rgba(12, 10, 6, .32);
  --page: #e9e4d8;
  --green: #137a33;
  --red: #c9231a;
  --green-fill: #15833a;
  --red-fill: #d42c22;

  --bg: var(--sys-bg);
  --card: var(--sys-card);
  --text: var(--sys-text);
  --hint: var(--sys-hint);
  --sep: var(--sys-sep);
  --accent: var(--sys-accent);
  --on-accent: #14110b;
  --link: #7a5a12;
  --header: var(--sys-header);
  --danger: var(--red);

  /* The balance card and the icon tiles: near-black with gold, the same in both themes. */
  --balance-top: #2c2417;
  --balance-base: #0e0c08;
  --balance-text: #f8ebc4;
  --balance-label: rgba(248, 235, 196, .86);
  --balance-edge: rgba(196, 154, 63, .4);
  --tile-glyph: #e7c477;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sys-bg: #0b0a07;
    --sys-card: #17140e;
    --sys-text: #f6f1e4;
    --sys-hint: rgba(236, 226, 202, .62);
    --sys-sep: rgba(230, 200, 130, .16);
    --sys-accent: #e0ba62;
    --sys-header: #0b0a07;
    --fill: rgba(200, 176, 120, .14);
    --fill-strong: rgba(200, 176, 120, .24);
    --glass-tint: rgba(34, 29, 20, .62);
    --glass-edge: rgba(255, 240, 200, .14);
    --glass-line: rgba(255, 240, 200, .07);
    --lens: rgba(255, 240, 200, .13);
    --thumb: #f6f1e4;
    --coin-edge: rgba(255, 240, 200, .16);
    --scrim: rgba(0, 0, 0, .55);
    --page: #050504;
    --green: #30d158;
    --red: #ff5a4f;
    --green-fill: #15833a;
    --red-fill: #d42c22;
    --link: #ebcb7c;
    --balance-edge: rgba(231, 196, 119, .45);
  }
}

:root[data-theme="dark"] {
  --sys-bg: #0b0a07;
  --sys-card: #17140e;
  --sys-text: #f6f1e4;
  --sys-hint: rgba(236, 226, 202, .62);
  --sys-sep: rgba(230, 200, 130, .16);
  --sys-accent: #e0ba62;
  --sys-header: #0b0a07;
  --fill: rgba(200, 176, 120, .14);
  --fill-strong: rgba(200, 176, 120, .24);
  --glass-tint: rgba(34, 29, 20, .62);
  --glass-edge: rgba(255, 240, 200, .14);
  --glass-line: rgba(255, 240, 200, .07);
  --lens: rgba(255, 240, 200, .13);
  --thumb: #f6f1e4;
  --coin-edge: rgba(255, 240, 200, .16);
  --scrim: rgba(0, 0, 0, .55);
  --page: #050504;
  --green: #30d158;
  --red: #ff5a4f;
  --green-fill: #15833a;
  --red-fill: #d42c22;
  --link: #ebcb7c;
  --balance-edge: rgba(231, 196, 119, .45);
}

/* kit.css writes these as literal blue and white. */
.balance {
  background: linear-gradient(180deg, var(--balance-top), var(--balance-base));
  color: var(--balance-text);
  box-shadow: inset 0 0 0 1px var(--balance-edge);
}
.balance-label, .balance-eye > span { color: var(--balance-label); }
.slider-tick.is-on { background: var(--on-accent); }
.tile--blue { --tile-top: var(--balance-top); --tile-base: var(--balance-base); color: var(--tile-glyph); }