/* Copied from the design playground (branch claude/modest-shtern-f64ddd @ 887b161, assets/webui/css/tokens.css) for the release backend's portal and admin panel (D-144). Do not edit here: changes go to the design branch and are copied again. */
/* COCMAN web UI - design tokens (D-141, canon direction at Linear / TradingView / Raycast craft).
   The only place for colours, type, spacing, depth and motion values. */

/* IBM Plex Sans (SIL OFL 1.1, assets/fonts/plex/OFL-IBM-Plex.txt): the owner's choice,
   the trading-platform voice (Binance's own face is built on it). */
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex/IBMPlexSans-Regular.ttf"); font-weight: 400; font-display: block; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex/IBMPlexSans-Medium.ttf"); font-weight: 500; font-display: block; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/plex/IBMPlexSans-SemiBold.ttf"); font-weight: 600; font-display: block; }

:root {
  color-scheme: dark;

  /* ground and elevations: cool near-black, three steps up, never pure grey */
  --ground: #08090b;
  --raised-1: #0f1013;   /* rail, page sections */
  --raised-2: #15161a;   /* cards */
  --raised-3: #1b1c21;   /* inputs inside cards, menus, hovered rows */
  --raised-4: #23242a;   /* pressed, selected controls */
  --edge: rgba(255, 255, 255, .07);       /* hairline borders */
  --edge-strong: rgba(255, 255, 255, .12);
  --edge-top: rgba(255, 255, 255, .045);  /* the light catching a card's top edge */

  /* ink */
  --ink: #ededef;
  --ink-2: #a3a6ae;   /* 7:1 on raised-2 */
  --ink-3: #7d818a;   /* 4.6:1 on raised-2: smallest text still AA */
  --ink-inverse: #0b0c0e;

  /* one accent, used for focus, the selected nav item and "on" */
  --accent: #3e83ff;
  --accent-hover: #6aa0ff;
  --accent-soft: rgba(62, 131, 255, .16);

  /* meaning */
  --ok: #10d38a;
  --ok-soft: rgba(16, 211, 138, .14);
  --bad: #ff4d61;
  --bad-soft: rgba(255, 77, 97, .14);
  --warn: #ff9a2e;          /* orange: never confused with gold */
  --warn-soft: rgba(255, 154, 46, .14);

  /* the game's resources: the only saturated inks of the page */
  --gold: #f8c93e;
  --elixir: #d47cff;
  --dark: #9fb2d9;

  /* type */
  --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-16: 16px;
  --t-20: 20px; --t-24: 24px; --t-30: 30px;

  /* space (4 px grid) and shape */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px;
  --r-card: 14px; --r-control: 9px; --r-small: 6px; --r-pill: 999px;
  --rail: 232px;

  /* depth: offset + soft blur, layered; plus the lit top edge */
  --shadow-card: 0 1px 0 var(--edge-top) inset, 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .55);
  --shadow-float: 0 1px 0 var(--edge-top) inset, 0 12px 32px -8px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);

  /* motion: short, exponential ease-out; nothing moves while hidden */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 140ms; --t-base: 200ms; --t-page: 260ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-page: 0ms; }
}