/* 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;
}

/* High Contrast — WCAG AAA (every text token ≥ 7:1 against --bg).
 * Colors picked from the Windows / VS Code HC palette: pure black canvas,
 * pure-white prose, yellow as the universal accent, lime/red/cyan for
 * pass/fail/info so the three are still distinguishable for protanopia. */
:root[data-theme='hc'] {
  --bg:       #000000;
  --bg-2:     #000000;
  --bg-3:     #0a0a0a;
  --panel:    #000000;
  --panel-2:  #0a0a0a;
  --line:     #ffffff;
  --line-2:   #ffffff;
  --text:     #ffffff;     /* 21:1 */
  --text-2:   #ffffff;     /* 21:1 — no muting; AAA prose */
  --text-3:   #e6e6e6;     /* 18:1 */
  --text-4:   #c0c0c0;     /* 12.6:1 */
  --accent:   #ffff00;     /* 19.6:1 — the one yellow */
  --pass:     #00ff00;     /* 15.3:1 */
  --pass-2:   #00ff00;
  --fail:     #ff8585;     /* 9.5:1 */
  --skip:     #ffd700;     /* 16.4:1 */
  --info:     #7fd5ff;     /* 11.7:1 */
  --run:      #00ff00;
  --selection:#ffff00;     /* paired with black text via override below */
  --shadow:   0 0 0 1px #ffffff;
  --hover:    rgba(255,255,255,.18);
  --active:   rgba(255,255,255,.30);
  --kbd-bg:   #000000;
  --tag-bg:   #000000;
  --tag-fg:   #ffff00;
  --green-arrow: #00ff00;
  --topbar-bg: #000000;
  --statusbar-bg: #ffff00;
  --statusbar-fg: #000000;
}
:root[data-theme='hc'] ::selection { background: #ffff00; color: #000000; }

/* AAA also requires every interactive control to expose a visible focus
 * indicator; force a 3px yellow outline on every focused element in HC,
 * overriding the `outline: 0` declarations sprinkled through app.css. */
:root[data-theme='hc'] :focus-visible {
  outline: 3px solid #ffff00 !important;
  outline-offset: 2px;
}

* { 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); }