/* Repofront theme: colors, radius, fonts and markdown styles.
   Custom viewers can paste this file into a <style> tag to match the app.
   Dark mode applies while the root element has class="dark". */

:root {
  color-scheme: light;
  --background: oklch(1 0 0);
  /* Pure black is harsh to read, so body text is slightly softened */
  --foreground: oklch(0.25 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.25 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.25 0 0);

  /* Scrim behind modals */
  --overlay: oklch(0 0 0 / 50%);

  /* Brand color. Change the primary of the whole site here */
  --brand: oklch(0.205 0 0);
  --brand-foreground: oklch(0.985 0 0);

  --primary: var(--brand);
  --primary-foreground: var(--brand-foreground);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  /* Selected state. Slightly stronger than hover (accent), text color unchanged */
  --selected: oklch(0.92 0 0);
  --destructive: oklch(0.55 0.18 25);
  --border: oklch(0.922 0 0);
  --input: oklch(0.85 0 0);
  --ring: var(--brand);
  --radius: 0.625rem;

  /* Sidebar is a light grey against the main area (white). Hover has to stay visible on it */
  --sidebar: oklch(0.975 0 0);
  --sidebar-accent: oklch(0.94 0 0);

  /* Small text (file tree, code, paths). 13px, as in VSCode */
  --font-detail: 0.8125rem;
  --font-family: "Inter Variable", "Noto Sans JP Variable", -apple-system, "Hiragino Sans", sans-serif;
}

.dark {
  color-scheme: dark;
  --background: oklch(0.145 0 0);
  /* Pure white is harsh to read, so body text is slightly dimmed */
  --foreground: oklch(0.87 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.87 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.87 0 0);
  --overlay: oklch(0 0 0 / 65%);
  --primary: oklch(0.87 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.93 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.93 0 0);
  --selected: oklch(0.32 0 0);
  /* Strong enough not to sink into the dark background when used as a button fill */
  --destructive: oklch(0.6 0.19 25);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --sidebar: oklch(0.175 0 0);
  --sidebar-accent: oklch(0.269 0 0);
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-family);
}

/* Markdown, kept close to GitHub */
.markdown { line-height: 1.7; }
.markdown > :first-child { margin-top: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
  margin: 1.4em 0 0.6em;
  font-weight: 600;
  line-height: 1.3;
}
.markdown h1 { font-size: 1.75em; }
.markdown h2 { font-size: 1.4em; }
.markdown h3 { font-size: 1.2em; }
.markdown h4 { font-size: 1.05em; }
.markdown h1, .markdown h2 {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3em;
}
.markdown p { margin: 0.6em 0; }
.markdown ul, .markdown ol { margin: 0.6em 0; padding-left: 1.8em; }
.markdown ul { list-style: disc; }
.markdown ol { list-style: decimal; }
.markdown li { margin: 0.2em 0; }
.markdown li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.4em; }
.markdown li > input[type="checkbox"] { margin-right: 0.4em; }
.markdown a { text-decoration: underline; text-underline-offset: 0.2em; }
.markdown hr { margin: 1.5em 0; border: 0; border-top: 1px solid var(--border); }
.markdown code {
  background: var(--muted);
  padding: 0.2em 0.4em;
  border-radius: 6px;
  font-size: 85%;
}
.markdown pre {
  margin: 0.6em 0;
  background: var(--muted);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
}
.markdown pre code { background: none; padding: 0; }
.markdown blockquote {
  margin: 0.6em 0;
  padding-left: 1em;
  color: var(--muted-foreground);
  border-left: 0.25em solid var(--border);
}
.markdown table { margin: 0.6em 0; border-collapse: collapse; }
.markdown th, .markdown td {
  border: 1px solid var(--border);
  padding: 6px 13px;
}
.markdown img { max-width: 100%; }

/* On narrow screens, fit tables to the width and wrap inside cells.
   Squeezed columns beat a horizontally scrolling document */
@media (width < 768px) {
  .markdown table { width: 100%; }
  .markdown th, .markdown td { padding: 6px 8px; overflow-wrap: anywhere; }
}