/* ============================================================================
   CS2STAT — Design tokens (single source of truth)
   Stage 1 of the UI redesign. See docs/ui-redesign.md.

   This file ONLY declares custom properties. Two groups:
   1) The new unified "--color-* / --radius-* / …" palette used by the new
      application shell and the .ui-* component classes (components.css).
   2) Legacy aliases (--bg, --card, --accent, …) copied VERBATIM from the old
      base.html :root so every existing page and Tailwind arbitrary value
      (e.g. bg-[var(--card)]) keeps rendering identically. They are migrated
      onto the --color-* tokens page-by-page in later stages — do NOT repoint
      them here, that would recolor pages this stage must leave unchanged.

   Breakpoints cannot live in CSS custom properties (can't be used inside
   @media), so they are documented as comments and hard-coded consistently:
     mobile:  max-width 767px   (matches base.html + replay_player.js)
     desktop: min-width 768px
   ========================================================================== */

:root {
  /* ---- Surfaces — cool ink, not flat black ---------------------------- */
  --color-bg:            #06090f;
  --color-bg-elevated:   #0a1018;
  --color-surface:       #0d141e;
  --color-surface-raised:#121b27;
  --color-surface-hover: #162131;

  /* ---- Borders -------------------------------------------------------- */
  --color-border:        #243142;
  --color-border-soft:   rgba(148, 173, 204, 0.11);
  --color-border-strong: #3a4f68;

  /* ---- Text ----------------------------------------------------------- */
  --color-text:          #eef3f8;
  --color-text-secondary:#9aabbd;
  --color-text-muted:    #6a7d93;

  /* ---- Brand + accents — orange only for actions ---------------------- */
  --color-primary:       #ff6a12;
  --color-primary-hover: #ff812f;
  --color-primary-soft:  rgba(255, 106, 18, 0.10);
  --color-teal:          #3ad4c5;
  --color-teal-soft:     rgba(58, 212, 197, 0.10);

  /* ---- Semantic ------------------------------------------------------- */
  --color-success:       #5fd46b;
  --color-success-soft:  rgba(95, 212, 107, 0.10);
  --color-warning:       #e0b84a;
  --color-warning-soft:  rgba(224, 184, 74, 0.10);
  --color-danger:        #ef6570;
  --color-danger-soft:   rgba(239, 101, 112, 0.10);

  /* ---- Radii — sharper, less “soft SaaS” ------------------------------ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- Typography — one Cyrillic-safe family across RU and EN ---------- */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "IBM Plex Sans Condensed", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs:  11px;
  --text-sm:  13px;
  --text-base:14px;
  --text-lg:  16px;
  --text-xl:  20px;
  --text-2xl: 28px;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ---- Layout --------------------------------------------------------- */
  --sidebar-width:   240px;
  --topbar-height:   56px;
  --bottomnav-height:60px;
  --content-max:     1760px;

  /* ---- z-index -------------------------------------------------------- */
  --z-base:    0;
  --z-sticky:  100;
  --z-topbar:  150;
  --z-sidebar: 200;
  --z-overlay: 290;
  --z-drawer:  300;
  --z-tooltip: 400;

  /* ======================= Legacy aliases ==============================
     Verbatim from the original base.html :root. Keep values as-is. */
  --bg:          #121212;
  --card:        #1f1f1f;
  --card-2:      #282828;
  --card-hover:  #2d2d2d;
  --border:      #303030;
  --text:        #d7d8db;
  --text-dim:    #9a9ca1;
  --text-faint:  #6b6d72;
  --accent:      #ff5500;
  --accent-hover:#ff6a1f;
  --ct:          #4a8fd4;
  --t:           #e0a83a;
  --green:       #32d35a;
  --red:         #fd4747;
  --yellow:      #f5c542;
}