/* ============================================================================
   "Ember Light" / "Ember Dark" — syntax theme for sunilbhatia.ai
   ----------------------------------------------------------------------------
   Built for this site rather than borrowed from an editor. Keywords take the
   site accent, so code and page share a spine; the other five hues are spaced
   far apart in hue and far enough in value that they stay distinguishable from
   one another and from plain text.

   Light foregrounds clear 4.5:1 against #FAFAF8. Dark foregrounds clear 4.5:1
   against #1B1D22, and none of them is pure white — at 12.5px on a dark ground
   maximum contrast is not maximum legibility.

   Class names are highlight.js's, so this file is the whole theme; there is
   nothing else to configure. Theme switching follows site.css: bare :root is
   light, the media query handles system-dark, [data-theme] handles the toggle.
   ========================================================================= */

:root {
  --code-bg: #FAFAF8;
  --code-cap: #F5F5F2;
  --code-border: #EAEBE7;
  --code-cap-border: #EFF0EC;
  --code-fg: #2A2F35;
  --code-gutter: #B4B9BE;

  --copy-bg: #FFFFFF;
  --copy-fg: #6D757D;
  --copy-border: #E2E3DF;
  --copy-done-border: #BFD9CB;

  --syn-keyword:  #8C4A0F;   /* keywords, decorators, preprocessor */
  --syn-string:   #1F6F4A;   /* strings, regex */
  --syn-func:     #1B5FA8;   /* function and method names, built-ins */
  --syn-type:     #0E6E6E;   /* types, classes, attributes, YAML/JSON keys */
  --syn-number:   #7A3E9D;   /* numbers, booleans, symbols */
  --syn-comment:  #6B7278;   /* comments — 4.7:1 on the code surface */
  --syn-punct:    #5A626A;   /* operators, punctuation */
  --syn-del:      #A6301A;   /* diff removals */

  --diff-add-bg: #EDF7F1;
  --diff-del-bg: #FCEEEA;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --code-bg: #1B1D22;
    --code-cap: #202329;
    --code-border: #292C33;
    --code-cap-border: #262930;
    --code-fg: #D2CFC9;
    --code-gutter: #5C6068;

    --copy-bg: #262A31;
    --copy-fg: #A29D96;
    --copy-border: #343841;
    --copy-done-border: #3F6B52;

    --syn-keyword:  #E0A56A;
    --syn-string:   #8FCFA5;
    --syn-func:     #82B8EC;
    --syn-type:     #6FC7C7;
    --syn-number:   #C4A2E8;
    --syn-comment:  #8A9098;
    --syn-punct:    #9BA1A9;
    --syn-del:      #F0907A;

    --diff-add-bg: rgba(143, 207, 165, 0.13);
    --diff-del-bg: rgba(240, 144, 122, 0.13);
  }
}

:root[data-theme="dark"] {
  --code-bg: #1B1D22;
  --code-cap: #202329;
  --code-border: #292C33;
  --code-cap-border: #262930;
  --code-fg: #D2CFC9;
  --code-gutter: #5C6068;

  --copy-bg: #262A31;
  --copy-fg: #A29D96;
  --copy-border: #343841;
  --copy-done-border: #3F6B52;

  --syn-keyword:  #E0A56A;
  --syn-string:   #8FCFA5;
  --syn-func:     #82B8EC;
  --syn-type:     #6FC7C7;
  --syn-number:   #C4A2E8;
  --syn-comment:  #8A9098;
  --syn-punct:    #9BA1A9;
  --syn-del:      #F0907A;

  --diff-add-bg: rgba(143, 207, 165, 0.13);
  --diff-del-bg: rgba(240, 144, 122, 0.13);
}

/* ── the block itself ────────────────────────────────────────────────── */
.code {
  margin: 0;
  border: 1px solid var(--code-border);
  border-radius: 5px;
  background: var(--code-bg);
  overflow: hidden;
  max-width: 100%;
}

.code figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--code-cap-border);
  background: var(--code-cap);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--syn-comment);
}
.code figcaption .lang {
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: 3px;
  padding: 2px 7px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}
.code figcaption .file { color: var(--muted); }
.code figcaption .copy {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--copy-fg);
  border: 1px solid var(--copy-border);
  background: var(--copy-bg);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
}
.code figcaption .copy:hover { color: var(--accent); border-color: var(--accent-line); }
.code figcaption .copy[data-copied] { color: var(--syn-string); border-color: var(--copy-done-border); }

/* Long lines scroll inside the block. The page body never moves sideways. */
.code pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--code-fg);
  tab-size: 2;
}
.code code { font-family: inherit; }

/* ── line numbers and called-out lines ───────────────────────────────── */
.code .line { display: block; padding: 0 16px; margin: 0 -16px; }
.code.numbered pre { counter-reset: ln; }
.code.numbered .line { padding-left: 52px; position: relative; counter-increment: ln; }
.code.numbered .line::before {
  content: counter(ln);
  position: absolute;
  left: 0;
  width: 38px;
  text-align: right;
  color: var(--code-gutter);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.code .line.hl { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }

/* ── highlight.js tokens ─────────────────────────────────────────────── */
.hljs-comment,
.hljs-quote { color: var(--syn-comment); font-style: italic; }

.hljs-keyword,
.hljs-meta,
.hljs-selector-tag,
.hljs-doctag { color: var(--syn-keyword); font-weight: 600; }

.hljs-string,
.hljs-regexp,
.hljs-char.escape_,
.hljs-selector-attr,
.hljs-selector-pseudo { color: var(--syn-string); }

.hljs-number,
.hljs-literal,
.hljs-symbol,
.hljs-bullet { color: var(--syn-number); }

.hljs-title,
.hljs-section,
.hljs-title.function_,
.hljs-built_in,
.hljs-selector-id { color: var(--syn-func); }

.hljs-title.class_,
.hljs-type,
.hljs-attr,
.hljs-attribute,
.hljs-selector-class,
.hljs-template-variable { color: var(--syn-type); }

.hljs-variable,
.hljs-params,
.hljs-property,
.hljs-name { color: var(--code-fg); }

.hljs-operator,
.hljs-punctuation,
.hljs-tag { color: var(--syn-punct); }

.hljs-link { color: var(--syn-func); text-decoration: underline; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

/* Shell transcripts: highlight.js marks the prompt as meta, so the command
   reads as the foreground and the output stays quiet without extra markup. */
.hljs-meta.prompt_ { color: var(--accent); font-weight: 700; }

/* Diffs get a wash as well as a colour, so additions and removals are legible
   in a screenshot and to anyone who cannot separate red from green. */
.hljs-addition {
  color: var(--syn-string);
  background: var(--diff-add-bg);
  display: inline-block;
  width: 100%;
}
.hljs-deletion {
  color: var(--syn-del);
  background: var(--diff-del-bg);
  display: inline-block;
  width: 100%;
}

@media (max-width: 820px) {
  .code pre { font-size: 12px; padding: 12px 13px; }
  .code .line { padding: 0 13px; margin: 0 -13px; }
  .code.numbered .line { padding-left: 44px; }
  .code.numbered .line::before { width: 32px; }
}