/* =========================================================
   CodeGlow · Core styles (structure only)
   Containers, scrollbar, and the 22 token-class color bindings.
   Palette values live in a separate theme stylesheet:
     <link rel="stylesheet" href="dist/themes/default.css">
   Ship a theme alongside this file or token colors will be empty.

   Author:  Jie <liuyingjierun@gmail.com>
   License: MIT
   ========================================================= */

/* =========================================================
   Code block container
   ========================================================= */
pre.codeglow,
pre[class*="language-"],
pre:has(> code[class*="language-"]) {
  display: block;
  margin: 0;
  padding: 20px 22px;
  background: var(--cg-bg);
  color: var(--cg-fg);
  border-radius: 10px;
  overflow-x: auto;
  font: 13px/1.65 "SF Mono", ui-monospace, "JetBrains Mono",
        Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  tab-size: 2;
  font-variant-ligatures: contextual;
}
pre.codeglow code,
pre[class*="language-"] code {
  display: block;
  font: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
}

/* Inline code */
:not(pre) > code.codeglow,
:not(pre) > code[class*="language-"] {
  padding: 0.1em 0.4em;
  border-radius: 4px;
  background: var(--cg-line-hl);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 0.92em;
}

/* Scrollbar (more restrained in dark mode) */
pre.codeglow::-webkit-scrollbar,
pre[class*="language-"]::-webkit-scrollbar { height: 8px; width: 8px; }
pre.codeglow::-webkit-scrollbar-thumb,
pre[class*="language-"]::-webkit-scrollbar-thumb {
  background: var(--cg-border); border-radius: 4px;
}

/* =========================================================
   Token classes · one-to-one with tokens.json
   ========================================================= */
.tk-keyword     { color: var(--cg-keyword);     font-weight: 700; }
.tk-function    { color: var(--cg-function); }
.tk-fn-decl     { color: var(--cg-fn-decl);     font-weight: 700; }
.tk-fn-builtin  { color: var(--cg-fn-builtin); }
.tk-var         { color: var(--cg-var); }
.tk-var-param   { color: var(--cg-var-param);   font-style: italic; }
.tk-var-builtin { color: var(--cg-var-builtin); font-weight: 600; }
.tk-var-const   { color: var(--cg-var-const); }
.tk-type        { color: var(--cg-type); }
.tk-property    { color: var(--cg-property); }
.tk-string      { color: var(--cg-string); }
.tk-regex       { color: var(--cg-regex); }
.tk-number      { color: var(--cg-number); }
.tk-comment     { color: var(--cg-comment);     font-style: italic; }
.tk-doc         { color: var(--cg-doc);         font-style: italic; }
.tk-decorator   { color: var(--cg-decorator); }
.tk-operator    { color: var(--cg-operator); }
.tk-punct       { color: var(--cg-punct); }
.tk-tag         { color: var(--cg-tag); }
.tk-attr        { color: var(--cg-attr); }
.tk-selector    { color: var(--cg-selector); }
.tk-css-prop    { color: var(--cg-css-prop); }
.tk-css-unit    { color: var(--cg-css-unit); }

/* Markdown-specific */
.tk-md-heading  { color: var(--cg-keyword);     font-weight: 700; }
.tk-md-bold     { color: var(--cg-fg);          font-weight: 700; }
.tk-md-italic   { color: var(--cg-fg);          font-style: italic; }
.tk-md-link     { color: var(--cg-number); }
.tk-md-code     { color: var(--cg-regex); }
.tk-md-list     { color: var(--cg-decorator); }