/* =========================================================
   XCB design tokens — the single source of colour, type and spacing
   for the client portal and the admin back office.
   Copied from improvements/xcb-dashboard.html + xcb-copy-trading.html.
   Brand: red #CD0511 · black #000 · white #FFF · green #198754
   *-text variants are tints of the brand colours so small text keeps
   4.5:1 contrast on its background. Solid colours are for fills only.
   Never hard-code a colour outside this file.
   ========================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root, [data-theme="dark"] {
  /* Surfaces */
  --bg: #000000;
  --panel: #0C0C0E;
  --panel-2: #131316;
  --panel-3: #1B1B1F;
  /* Lines */
  --line: #222227;
  --line-strong: #34343B;
  /* Text */
  --text: #FFFFFF;
  --text-2: #CFCFD6;
  --muted: #8E8E99;
  /* Brand red = brand + navigation + selection */
  --red: #CD0511;
  --red-hover: #E30613;
  --red-text: #FF4D57;
  --red-soft: rgba(205, 5, 17, 0.14);
  --red-line: rgba(205, 5, 17, 0.55);
  /* Green = money + growth */
  --green: #198754;
  --green-hover: #1E9E63;
  --green-text: #34C27F;
  --green-soft: rgba(25, 135, 84, 0.16);
  --green-line: rgba(25, 135, 84, 0.5);
  /* Amber = drawdown, warnings, pending */
  --warn: #F5A524;
  --warn-soft: rgba(245, 165, 36, 0.12);
  --warn-line: rgba(245, 165, 36, 0.4);
  /* Gold = Top trader badge only */
  --gold: #F4C552;
  --gold-soft: rgba(244, 197, 82, 0.12);
  --gold-line: rgba(244, 197, 82, 0.4);
  /* Misc */
  --track: #26262C;
  --face: radial-gradient(circle at 30% 25%, #2E2E35, #121215 70%);
  --on-fill: #FFFFFF;           /* text on solid red/green fills */
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  --overlay: rgba(0, 0, 0, 0.66);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #F3F3F5;
  --panel: #FFFFFF;
  --panel-2: #F7F7F9;
  --panel-3: #ECECF0;
  --line: #E3E3E8;
  --line-strong: #CFCFD7;
  --text: #000000;
  --text-2: #2A2A31;
  --muted: #5F5F6B;
  --red-text: #B0040F;
  --red-soft: rgba(205, 5, 17, 0.08);
  --red-line: rgba(205, 5, 17, 0.45);
  --green-text: #146C43;
  --green-soft: rgba(25, 135, 84, 0.1);
  /* Reference value is #A35F00; darkened slightly so amber text and amber pills
     reach 4.5:1 on every light surface, including --panel-3 and tinted tiles. */
  --warn: #945600;
  --warn-soft: rgba(245, 165, 36, 0.14);
  --warn-line: rgba(176, 110, 0, 0.4);
  --gold: #8A5F00;
  --gold-soft: rgba(244, 197, 82, 0.2);
  --gold-line: rgba(176, 125, 0, 0.4);
  --track: #E1E1E7;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
  --overlay: rgba(0, 0, 0, 0.4);
  color-scheme: light;
}

:root {
  /* Type */
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --fs-page: 28px;      /* page title, 800 */
  --fs-card: 16px;      /* card title, 800 */
  --fs-body: 14px;
  --fs-meta: 12px;      /* muted meta, 12–13px */

  /* Radius */
  --r-panel: 20px;
  --r-tile: 14px;
  --r-control: 12px;
  --r-pill: 999px;

  /* Spacing */
  --gap: 20px;          /* between cards, desktop */
  --pad: 20px;          /* card padding, desktop */
  --touch: 44px;        /* minimum touch target */

  /* Table density (comfortable by default; .density-compact for admin) */
  --row-h: 56px;
  --row-fs: 14px;

  /* Layout */
  --sidebar-w: 240px;
  --content-max: 1480px;
}

@media (max-width: 720px) {
  :root { --gap: 16px; --pad: 16px; }
}