/* base.css — design tokens (Playwright trace viewer + VS Code dark+) */
:root {
  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:  12px;
  --text-sm:  13px;
  --text-base: 14px;
  --text-md:  15px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 30px;
  --text-3xl: 44px;

  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;

  /* Easing */
  --ease: cubic-bezier(.2,.7,.2,1);

  /* Status semantic */
  --pass: #4ec9b0;       /* playwright/teal-green */
  --pass-2:#2ea889;
  --fail: #f48771;
  --skip: #d7ba7d;
  --info: #569cd6;
  --run:  #4ec9b0;
}

/* Dark (default) — Playwright trace viewer / VS Code dark+ */
:root[data-theme='dark'] {
  --bg:       #1e1e1e;
  --bg-2:     #181818;
  --bg-3:     #252526;
  --panel:    #1f1f1f;
  --panel-2:  #232323;
  --line:     #2d2d30;
  --line-2:   #3c3c3c;
  --text:     #e6e6e6;
  --text-2:   #c8c8c8;
  --text-3:   #9da0a4;
  --text-4:   #6e7177;
  --accent:   #4ec9b0;
  --selection: #264f78;
  --shadow:   0 2px 8px rgba(0,0,0,.4);
  --hover:    rgba(255,255,255,.04);
  --active:   rgba(255,255,255,.07);
  --kbd-bg:   #2d2d30;
  --tag-bg:   #2a2d2e;
  --tag-fg:   #9cdcfe;
  --green-arrow: #4ec9b0;
  --topbar-bg: #2d2d30;
  --statusbar-bg: #007acc;
  --statusbar-fg: #ffffff;
}

/* Light */
:root[data-theme='light'] {
  --bg:       #ffffff;
  --bg-2:     #f3f3f3;
  --bg-3:     #ececec;
  --panel:    #ffffff;
  --panel-2:  #f8f8f8;
  --line:     #e6e6e6;
  --line-2:   #d4d4d4;
  --text:     #1f1f1f;
  --text-2:   #393939;
  --text-3:   #616161;
  --text-4:   #8a8a8a;
  --accent:   #0c8a6f;
  --pass:     #098e6a;
  --pass-2:   #0c8a6f;
  --fail:     #c72e22;
  --skip:     #b07c1f;
  --info:     #2169b8;
  --selection:#add6ff;
  --shadow:   0 2px 8px rgba(0,0,0,.08);
  --hover:    rgba(0,0,0,.04);
  --active:   rgba(0,0,0,.06);
  --kbd-bg:   #ececec;
  --tag-bg:   #e8f0fe;
  --tag-fg:   #1a73e8;
  --green-arrow: #098e6a;
  --topbar-bg: #f3f3f3;
  --statusbar-bg: #007acc;
  --statusbar-fg: #ffffff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection); color: var(--text); }
button { font: inherit; color: inherit; }
input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
code, pre, .mono { font-family: var(--font-mono); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }