/* theme.css — generated by docsh
 *
 * Light and dark modes via prefers-color-scheme.
 * Only the accent colour (--theme-color) uses the project theme;
 * all other colours are neutral greys.
 */

/* ── Core variables ───────────────────────────────────────────────── */
:root {
  --theme-color: #9e0000;

  --sidebar-width: 268px;
  --border-radius: 4px;

  --blockquote-border-color: #9e0000;
  --link-color-hover:           #9e0000;
  --link-underline-color-hover: #9e0000;
}

/* ── Light mode ───────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg:    #ffffff;
    --color-text:  #1a1a2e;
    --sidebar-bg:            #f8f8fa;
    --sidebar-border-color:  #e2e2e6;
    --sidebar-name-color:    #9e0000;
    --sidebar-link-color:    #3a3a50;
    --sidebar-toggle-bg:     #9e00001a;
    --border-color:          #e2e2e6;
    --link-color:            #9e0000;
    --link-underline-color:  #9e000066;
    --blockquote-color:      #666680;
    --table-row-alt-bg:      #f5f5f8;
    --strong-color:          #0f0f20;
  }
}

/* ── Dark mode ────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:   #12121a;
    --color-text: #d0d0e0;
    --sidebar-bg:            #0c0c12;
    --sidebar-border-color:  #2a2a3a;
    --sidebar-name-color:    #c46666;
    --sidebar-link-color:    #a0a0b8;
    --sidebar-toggle-bg:     #c466661f;
    --border-color:          #2a2a3a;
    --link-color:            #c46666;
    --link-underline-color:  #c4666659;
    --blockquote-color:       #808098;
    --table-row-alt-bg:      #1a1a26;
    --strong-color:          #e0e0f0;
  }
}

/* ── Components ───────────────────────────────────────────────────── */
html {
  background-color: var(--color-bg);
}

.sidebar .app-name {
  border-left: 3px solid var(--theme-color);
  padding-left: 14px;
  padding-block: .35em;
  margin-inline: 0;
  margin-block: 1.2rem;
  text-align: left;
}

.markdown-section h2 { border-bottom-color: #9e000025; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
}

.vignette-ronde {
  aspect-ratio: 1/1;
  border-radius: 100%;
}