/* tokens.css — design tokens + reset.
   Dark, sharp, data-dense. CS2 red accent. */

:root {
  /* Surfaces */
  --bg:        #0f0f0f;   /* app background */
  --bg-2:      #0b0b0b;   /* sidebar / deepest */
  --panel:     #161616;   /* cards */
  --panel-2:   #1c1c1c;   /* nested / hover */
  --elevated:  #1e1e1e;   /* inputs, raised rows */

  /* Lines */
  --border:    #262626;
  --border-2:  #333333;

  /* Text */
  --text:      #f5f5f5;   /* primary */
  --text-2:    #b4b4b4;   /* secondary */
  --muted:     #888888;   /* tertiary / labels */
  --faint:     #5a5a5a;   /* disabled / placeholder */

  /* Accent (CS2 red) */
  --accent:        #E84D4D;
  --accent-hover:  #f26464;
  --accent-dim:    rgba(232, 77, 77, 0.14);
  --accent-line:   rgba(232, 77, 77, 0.40);

  /* Semantic */
  --win:    #45b86b;
  --loss:   #e8534d;
  --ot:     #e0a93b;
  --info:   #5aa9e6;

  /* Type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;

  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  26px;
  --fs-3xl:  34px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* Sharp corners — barely-there radius */
  --radius:    2px;
  --radius-lg: 3px;

  --sidebar-w: 224px;
  --maxw: 1200px;

  --shadow: 0 1px 0 rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  --ring: 0 0 0 1px var(--accent-line), 0 0 0 3px var(--accent-dim);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure { margin: 0; }

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

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

input, textarea, select { background: none; }

ul { margin: 0; padding: 0; list-style: none; }

svg { display: block; }

::selection { background: var(--accent-dim); color: var(--text); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background: #444; }
*::-webkit-scrollbar-track { background: transparent; }