/* mcltspice docs -- teal accent, zinc grays
 * Oscilloscope-trace aesthetic for an EDA tool */

@import "@astrojs/starlight-tailwind";
@import "tailwindcss";
@import "./oscilloscope.css";

:root {
  /* Dark mode (Starlight default: :root = dark)
   * Gray scale: gray-1 = highest contrast (lightest), gray-7 = lowest */
  --sl-color-accent-low: #083344;    /* teal-950 — dark accent bg */
  --sl-color-accent: #2dd4bf;        /* teal-400 — bright on dark bg */
  --sl-color-accent-high: #ccfbf1;   /* teal-100 — light accent text */

  --sl-color-gray-1: #fafafa;        /* zinc-50 */
  --sl-color-gray-2: #e4e4e7;        /* zinc-200 */
  --sl-color-gray-3: #a1a1aa;        /* zinc-400 */
  --sl-color-gray-4: #52525b;        /* zinc-600 */
  --sl-color-gray-5: #27272a;        /* zinc-800 */
  --sl-color-gray-6: #18181b;        /* zinc-900 */
  --sl-color-gray-7: #0f0f11;        /* near-black */
}

:root[data-theme="light"] {
  /* Light mode: gray-1 = highest contrast (darkest) */
  --sl-color-accent-low: #ccfbf1;    /* teal-100 — light accent bg */
  --sl-color-accent: #0d9488;        /* teal-600 — darker on light bg */
  --sl-color-accent-high: #042f2e;   /* teal-950 — dark accent text */

  --sl-color-gray-1: #0f0f11;        /* near-black */
  --sl-color-gray-2: #18181b;        /* zinc-900 */
  --sl-color-gray-3: #3f3f46;        /* zinc-700 */
  --sl-color-gray-4: #a1a1aa;        /* zinc-400 */
  --sl-color-gray-5: #d4d4d8;        /* zinc-300 */
  --sl-color-gray-6: #e4e4e7;        /* zinc-200 */
  --sl-color-gray-7: #fafafa;        /* zinc-50 */
}

/* Tool reference parameter tables */
.param-table th {
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.param-table code {
  font-size: 0.85em;
}

.param-table td:first-child {
  font-family: var(--sl-font-mono);
  font-weight: 500;
  color: var(--sl-color-accent);
}