/* Core light mode tokens */
:root {
  --bg-main: #f9fafb;
  --bg-card: #ffffff;
  --bg-th: #f3f4f6;
  --text-th: #1f2937;
  --text-main: #1f2937;
  --text-label: #374151;
  --text-title: #312e81;
  --border-color: #e5e7eb;
  --input-bg: #ffffff;
  --code-bg-1: #1f2937;
  --code-bg-2: #111827;
  --btn-sec-bg: #f3f4f6;
  --btn-sec-text: #1e1b4b;
  --btn-sec-hover: #e0e7ff;
  --row-hover: #e0e7ff;
}

/* html { */
/*   font-size: 18px; */
/* } */

/* textarea, */
/* select, */
/* input { */
/*   font-size: 16px; */
/* } */

.dark {
  --bg-main: #030712;
  --bg-card: #111827;
  --bg-th: #1f2937;
  --text-th: #d1d5db;
  --text-main: #e5e7eb;
  --text-label: #d1d5db;
  --text-title: #818cf8;
  --border-color: #1f2937;
  --input-bg: #111827;
  --code-bg-1: #111827;
  --code-bg-2: #000000;
  --btn-sec-bg: #111827;
  --btn-sec-text: #d1d5db;
  --btn-sec-hover: #1f2937;
  --row-hover: #283449;
}

/* Dynamic theme classes mapped out of tailwind boundaries */
.theme-bg { background-color: var(--bg-main); }
.theme-card { background-color: var(--bg-card); }
.theme-th-bg { background-color: var(--bg-th); }
.theme-th-text { color: var(--text-th); }
.theme-text { color: var(--text-main); }
.theme-label { color: var(--text-label); }
.theme-title { color: var(--text-title); }
.theme-border { border-color: var(--border-color); }
.theme-input { background-color: var(--input-bg); }
.theme-code-1 { background-color: var(--code-bg-1); }
.theme-code-2 { background-color: var(--code-bg-2); }

/* Precise typography for console/terminal elements */
pre code, pre#inlineQueryOptText {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* Secondary Actions Framework */
.btn-secondary {
  background-color: var(--btn-sec-bg);
  color: var(--btn-sec-text);
}
.btn-secondary:hover {
  background-color: var(--btn-sec-hover);
}

/* Matches .btn-secondary:hover so table row hover feels consistent
   with the rest of the UI instead of a flat gray. */
.theme-row-hover:hover {
  background-color: var(--row-hover);
}