/*
 * Tickerheads brand theme for the Starlight litepaper.
 *
 * Overrides Starlight's design tokens rather than its component CSS, so it
 * survives Starlight upgrades. Loaded last, after the generated stylesheets.
 *
 * NOTE: docs/ is Astro build output. Re-apply this file and its <link> tag
 * after every docs rebuild, or add it to the Astro source as a custom CSS
 * entry (starlight({ customCss: ['./src/styles/tickerheads.css'] })).
 */

@font-face {
  font-family: "Archivo Black";
  src: url("/assets/fonts/archivo-black-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root,
:root[data-theme="dark"] {
  --th-ink: #040605;
  --th-panel: #0f1512;
  --th-green: #00c805;
  --th-acid: #a3f7bf;
  --th-line: rgba(255, 255, 255, 0.16);

  --sl-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --sl-color-accent-low: #04310a;
  --sl-color-accent: #00c805;
  --sl-color-accent-high: #a3f7bf;

  --sl-color-white: #ffffff;
  --sl-color-gray-1: #eef4ef;
  --sl-color-gray-2: #c6d3c8;
  --sl-color-gray-3: #90a294;
  --sl-color-gray-4: #55655a;
  --sl-color-gray-5: #29352d;
  --sl-color-gray-6: #18211b;
  --sl-color-gray-7: #111813;
  --sl-color-black: #040605;

  --sl-color-bg: #040605;
  --sl-color-bg-nav: rgba(4, 6, 5, 0.92);
  --sl-color-bg-sidebar: #080c09;
  --sl-color-bg-inline-code: rgba(0, 200, 5, 0.12);
  --sl-color-hairline: rgba(255, 255, 255, 0.12);
  --sl-color-hairline-light: rgba(255, 255, 255, 0.18);
  --sl-color-hairline-shade: rgba(255, 255, 255, 0.08);
  --sl-color-text: rgba(255, 255, 255, 0.84);
  --sl-color-text-accent: #00c805;
  --sl-color-text-invert: #040605;
}

/* The litepaper commits to the dark brand world; force it in both themes. */
:root[data-theme="light"] {
  color-scheme: dark;
  --sl-color-bg: #040605;
  --sl-color-bg-nav: rgba(4, 6, 5, 0.92);
  --sl-color-bg-sidebar: #080c09;
  --sl-color-bg-inline-code: rgba(0, 200, 5, 0.12);
  --sl-color-text: rgba(255, 255, 255, 0.84);
  --sl-color-text-accent: #00c805;
  --sl-color-text-invert: #040605;
  --sl-color-white: #ffffff;
  --sl-color-gray-1: #eef4ef;
  --sl-color-gray-2: #c6d3c8;
  --sl-color-gray-3: #90a294;
  --sl-color-gray-4: #55655a;
  --sl-color-gray-5: #29352d;
  --sl-color-gray-6: #18211b;
  --sl-color-gray-7: #111813;
  --sl-color-black: #040605;
  --sl-color-hairline: rgba(255, 255, 255, 0.12);
  --sl-color-hairline-light: rgba(255, 255, 255, 0.18);
  --sl-color-hairline-shade: rgba(255, 255, 255, 0.08);
}

/* The faint scanline grid the rest of the site uses. */
body {
  background-image:
    linear-gradient(rgba(0, 200, 5, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 200, 5, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  background-attachment: fixed;
}

/* The page title sits outside .sl-markdown-content, in .sl-container. */
.sl-container > h1,
.sl-markdown-content h1,
.sl-markdown-content h2,
.sl-markdown-content h3,
.site-title {
  font-family: "Archivo Black", Inter, sans-serif;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.sl-container > h1,
.sl-markdown-content h1,
.sl-markdown-content h2 {
  line-height: 1.05;
}

.sl-container > h1 {
  color: var(--sl-color-white);
}

.site-title {
  color: var(--sl-color-white);
}

/* Brand chrome: hard edges and a green rule, matching the main site. */
header.header {
  border-bottom: 1px solid var(--th-green);
  backdrop-filter: blur(16px);
}

.sl-markdown-content a:not(:where(.not-content *)) {
  color: var(--th-green);
  text-underline-offset: 3px;
}

.sl-markdown-content table {
  border: 1px solid var(--th-line);
}

.sl-markdown-content th {
  background: rgba(0, 200, 5, 0.1);
  color: var(--sl-color-white);
  font-family: Inter, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sl-markdown-content td,
.sl-markdown-content th {
  border-color: var(--th-line);
}

.sl-markdown-content tbody tr:hover {
  background: rgba(0, 200, 5, 0.05);
}

/* Asides pick up the brand green rather than Starlight's purple/blue. */
.starlight-aside {
  border-inline-start-width: 3px;
}

.starlight-aside--note {
  --sl-color-asides-text-accent: var(--th-green);
  --sl-color-asides-border: var(--th-green);
  background: rgba(0, 200, 5, 0.07);
}

.starlight-aside--caution {
  --sl-color-asides-text-accent: #ffd23f;
  --sl-color-asides-border: #ffd23f;
  background: rgba(255, 210, 63, 0.08);
}

.starlight-aside--danger {
  --sl-color-asides-text-accent: #ff8a6b;
  --sl-color-asides-border: #ff5000;
  background: rgba(255, 80, 0, 0.08);
}

/* Sidebar: current page reads as a brand chip. */
.sidebar-content a[aria-current="page"],
.sidebar-content a[aria-current="page"]:hover {
  background: var(--th-green);
  color: var(--th-ink);
  font-weight: 900;
}

:focus-visible {
  outline: 3px solid var(--th-green);
  outline-offset: 2px;
}

/*
 * Code blocks. Starlight ships a light Shiki theme whose token colours
 * (e.g. #403f53) sit at 1.8:1 on the dark brand background. Neutralise the
 * inline token colours and let the block inherit readable text instead.
 */
.sl-markdown-content pre,
.expressive-code pre {
  border: 1px solid var(--th-line);
  background: #0b110d !important;
}

.sl-markdown-content pre code,
.sl-markdown-content pre span,
.expressive-code pre code,
.expressive-code pre span {
  color: rgba(233, 241, 234, 0.92) !important;
}

.sl-markdown-content pre .line span[style*="403f53"],
.sl-markdown-content pre span[style*="994cc3"],
.sl-markdown-content pre span[style*="0c969b"] {
  color: var(--th-acid) !important;
}

.sl-markdown-content :not(pre) > code {
  border: 1px solid rgba(0, 200, 5, 0.28);
  color: var(--th-acid);
}