/* sparkrun — Starlight theme overrides
 *
 * Starlight color semantics:
 *   --sl-color-white = FOREGROUND (text direction)
 *   --sl-color-black = BACKGROUND direction
 *   gray-1 = near text, gray-6 = near background
 *   :root = dark mode defaults
 *   [data-theme='light'] = light mode overrides
 *
 * Material Design 3 inspired color system
 */

/* Fonts (both modes) */
:root {
  --sl-font: 'Inter', system-ui, -apple-system, sans-serif;
  --sl-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* Dark mode (default) - Material 3 Dark Palette */
:root {
  /* MD3: Neutral-98 for text on dark */
  --sl-color-white: #e2e2e6;
  /* MD3: Neutral-90 */
  --sl-color-gray-1: #c6c6ca;
  /* MD3: Neutral-80 */
  --sl-color-gray-2: #abaab0;
  /* MD3: Neutral-40 (midtones) */
  --sl-color-gray-3: #606064;
  /* MD3: Neutral-20 */
  --sl-color-gray-4: #303033;
  /* MD3: Neutral-12 (surface container) */
  --sl-color-gray-5: #1e1e21;
  /* MD3: Neutral-6 (surface) */
  --sl-color-gray-6: #111114;
  /* MD3: Neutral-4 (deep background) */
  --sl-color-black: #0b0b0e;

  /* MD3: Primary-80 (accent) - A vibrant Indigo/Blue */
  --sl-color-accent-low: #2a3c5d;
  --sl-color-accent: #b0c6ff;
  --sl-color-accent-high: #dae2ff;

  /* Material properties */
  --sl-content-width: 50rem;
  --sr-radius: 1rem;
}

/* Light mode - Material 3 Light Palette */
:root[data-theme='light'] {
  /* MD3: Neutral-10 */
  --sl-color-white: #1b1b1f;
  /* MD3: Neutral-20 */
  --sl-color-gray-1: #303033;
  /* MD3: Neutral-30 */
  --sl-color-gray-2: #46464a;
  /* MD3: Neutral-50 */
  --sl-color-gray-3: #77767a;
  /* MD3: Neutral-80 */
  --sl-color-gray-4: #abaab0;
  /* MD3: Neutral-95 (surface container) */
  --sl-color-gray-5: #f2f0f4;
  /* MD3: Neutral-98 (surface) */
  --sl-color-gray-6: #fbf8fd;
  /* MD3: Neutral-100 (pure white) */
  --sl-color-black: #ffffff;

  /* MD3: Primary-40 (accent) */
  --sl-color-accent-low: #dae2ff;
  --sl-color-accent: #435e91;
  --sl-color-accent-high: #001a41;
}

/* NVIDIA green accent utility */
.nvidia-green {
  color: #76b900;
}

/* Smooth transitions for theme toggle */
* {
  transition: background-color 0.25s ease, color 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Code blocks - Material design rounding */
pre {
  border-radius: var(--sr-radius) !important;
  border: 1px solid var(--sl-color-gray-5) !important;
}

/* Sidebar refinements - Material 3 side nav style */
.sidebar-content {
  padding-inline-start: 1rem !important;
  padding-inline-end: 1rem !important;
}

.sidebar-content a[aria-current='page'] {
  font-weight: 600;
  background-color: var(--sl-color-accent-low);
  border-radius: 2rem;
  padding-inline: 1rem;
  color: var(--sl-color-accent-high) !important;
}

/* Card overrides for Starlight's default cards */
.card {
  border-radius: var(--sr-radius) !important;
  border-color: var(--sl-color-gray-5) !important;
  background-color: var(--sl-color-gray-6) !important;
}

/* Table styling */
table {
  font-size: 0.9em;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

th {
  font-weight: 600;
  background-color: var(--sl-color-gray-5);
  border-bottom: 2px solid var(--sl-color-gray-4);
  padding: 0.75rem !important;
}

td {
  border-bottom: 1px solid var(--sl-color-gray-5);
  padding: 0.75rem !important;
}

/* Material buttons in landing page might need these too */
.action.primary {
  border-radius: 2rem !important;
}
