/* share.djiang.xyz — shared theme library (Tokyo Night).
   Injected on every page. Tokens are --ds-* prefixed so they never collide with a
   page's own variables, and components are .ds-* opt-in so nothing restyles a page
   that doesn't ask for it. The one always-on element is the .dshare-nav bar, whose
   styles are injected inline (self-contained) so it renders even if this file 404s. */

:root {
  --ds-bg:      #1a1b26;
  --ds-bg-soft: #16161e;
  --ds-panel:   #1c1d29;
  --ds-panel-2: #22232f;
  --ds-line:    #24283b;
  --ds-fg:      #c0caf5;
  --ds-fg-mid:  #a9b1d6;
  --ds-fg-dim:  #565f89;
  --ds-blue:    #7aa2f7;
  --ds-purple:  #bb9af7;
  --ds-green:   #9ece6a;
  --ds-cyan:    #7dcfff;
  --ds-gold:    #e0af68;
  --ds-red:     #f7768e;
  --ds-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --ds-radius: 10px;
}

/* ---- opt-in components (a page uses these by adding the class) ---- */

.ds-container { max-width: 720px; margin: 0 auto; padding: 0 24px; }

.ds-prose { color: var(--ds-fg-mid); font-family: var(--ds-mono); line-height: 1.7;
  font-size: 0.95rem; }
.ds-prose h1, .ds-prose h2, .ds-prose h3 { color: var(--ds-fg); line-height: 1.25;
  margin: 1.6em 0 0.5em; letter-spacing: -0.01em; }
.ds-prose h1 { font-size: 1.7rem; } .ds-prose h2 { font-size: 1.3rem; }
.ds-prose a { color: var(--ds-blue); text-decoration: none; }
.ds-prose a:hover { text-decoration: underline; }
.ds-prose code { font-family: var(--ds-mono); background: var(--ds-bg-soft);
  border: 1px solid var(--ds-line); border-radius: 4px; padding: 1px 5px; font-size: 0.88em; }
.ds-prose blockquote { border-left: 2px solid var(--ds-blue); padding-left: 14px;
  color: var(--ds-fg-dim); margin: 1em 0; }

.ds-card { background: var(--ds-panel); border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius); padding: 18px 20px; }

.ds-btn { display: inline-block; background: var(--ds-blue); color: var(--ds-bg);
  border: none; border-radius: 6px; padding: 9px 16px; font: 700 0.82rem var(--ds-mono);
  cursor: pointer; text-decoration: none; }
.ds-btn:hover { filter: brightness(1.1); }
.ds-btn.ghost { background: transparent; color: var(--ds-fg-mid); border: 1px solid var(--ds-line); }

.ds-tag { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ds-blue); border: 1px solid color-mix(in srgb, var(--ds-blue) 45%, transparent);
  background: color-mix(in srgb, var(--ds-blue) 12%, transparent);
  padding: 2px 8px; border-radius: 999px; }