/* One look for saulecabrera.dev, wiki.saulecabrera.dev and the garden.
 *
 * Quiet and typographic, after Linear and paco.me: neutral grays, one
 * indigo accent, Inter for text and JetBrains Mono for code. Both have true
 * italics drawn to match their uprights, so emphasis and comments stay in
 * the same voice. Light and dark follow the system.
 *
 * This file holds what every site shares: tokens, type, prose, code and its
 * highlighting. Each site adds only its own chrome on top. Highlighting
 * covers both Hugo's Chroma (`.chroma .k`, with markup.highlight.noClasses
 * off) and the garden's syntect (`.s-keyword`), through the same colors.
 *
 * Fonts: Inter 4.1 and JetBrains Mono 2.304 (SIL Open Font License 1.1),
 * subset to Latin; see fonts/README.md.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/JetBrainsMono.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Italic.woff2") format("woff2");
}

/* ── Tokens ─────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --bg: #ffffff;
  --bg-subtle: #f7f7f8;
  --bg-hover: #f1f1f3;
  --fg: #18191b;
  --fg-muted: #66696f;
  --fg-faint: #9b9ea4;
  --border: #ebebed;
  --border-strong: #dcdde0;
  --accent: #5e6ad2;
  --accent-fg: #4b55bf;
  --accent-soft: #eef0fb;
  --selection: #dfe2f8;

  --green: #2e7d4f;   --green-soft: #e8f4ec;
  --amber: #9a6512;   --amber-soft: #fbf1df;
  --blue: #3366c4;    --blue-soft: #e9effa;

  /* Code */
  --code-bg: #f7f7f8;
  --code-fg: #24262a;
  --hl-comment: #9095a0;
  --hl-keyword: #6b4fd1;
  --hl-string: #2e7d4f;
  --hl-function: #2f62c0;
  --hl-type: #a3570f;
  --hl-constant: #c2410c;
  --hl-macro: #b8337b;
  --hl-punct: #7b7f87;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0c0d;
    --bg-subtle: #111214;
    --bg-hover: #17181b;
    --fg: #ececee;
    --fg-muted: #8b8f97;
    --fg-faint: #5d6168;
    --border: #1d1e21;
    --border-strong: #2a2c30;
    --accent: #7e88ea;
    --accent-fg: #9aa2f2;
    --accent-soft: #1a1c2e;
    --selection: #2b2f55;

    --green: #7fcf9c;   --green-soft: #13241a;
    --amber: #e6b366;   --amber-soft: #2a2114;
    --blue: #86aef2;    --blue-soft: #15203a;

    --code-bg: #111214;
    --code-fg: #d9dade;
    --hl-comment: #6a6f78;
    --hl-keyword: #b3a2f7;
    --hl-string: #8fd4a8;
    --hl-function: #8cb4f5;
    --hl-type: #efb779;
    --hl-constant: #f4a37a;
    --hl-macro: #ee93c6;
    --hl-punct: #8b8f97;
  }
}

/* ── Base ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.6 var(--sans);
  letter-spacing: -0.006em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
h1 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.028em; margin: 0; }
code, kbd, pre, samp { font-family: var(--mono); font-variant-ligatures: none; letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── Prose: a post, a note, a garden document ───────────────────────── */

.prose { font-size: 1rem; line-height: 1.7; color: var(--fg); overflow-wrap: break-word; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: 1.2rem; line-height: 1.35; margin-top: 2.4em; }
.prose h3 { font-size: 1.02rem; line-height: 1.4; margin-top: 2em; }
.prose h4 { font-size: .95rem; line-height: 1.4; margin-top: 1.8em; color: var(--fg-muted); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
/* Every heading links to itself: a `#` after it, shown on hover (always,
 * faintly, where there is no hover). Room is left above for the garden's
 * sticky bar when a link jumps to one. */
.prose :is(h1, h2, h3, h4, h5, h6) { scroll-margin-top: 4.5rem; }
.prose a.anchor {
  margin-left: .4em;
  color: var(--fg-faint);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
  transition: opacity .15s, color .15s;
}
.prose :is(h1, h2, h3, h4, h5, h6):hover a.anchor, .prose a.anchor:focus-visible { opacity: 1; }
.prose a.anchor:hover { color: var(--accent-fg); }
@media (hover: none) { .prose a.anchor { opacity: .6; } }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }
.prose a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: text-decoration-color .15s, color .15s;
}
.prose a:hover { color: var(--accent-fg); text-decoration-color: var(--accent); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .35em; }
.prose li > ul, .prose li > ol { margin-top: .35em; }
.prose li::marker { color: var(--fg-faint); }
.prose li:has(> input[type=checkbox]) { list-style: none; margin-left: -1.25em; }
.prose input[type=checkbox] { accent-color: var(--accent); margin: 0 .55em 0 0; transform: translateY(.1em); }
.prose blockquote {
  padding: 0 0 0 1em;
  border-left: 2px solid var(--border-strong);
  color: var(--fg-muted);
}
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.5; }
.prose th, .prose td { text-align: left; padding: .55em .75em; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { font-weight: 500; color: var(--fg-muted); }
.prose sup, .prose .footnote-reference { font-size: .75em; line-height: 0; }
.prose .footnote-definition { font-size: .9rem; color: var(--fg-muted); display: flex; gap: .5em; }
.prose .footnote-definition p { margin: 0; }

/* Where a post's summary ends (`<!--more-->`); drafts show it, sites drop it. */
.prose .more {
  display: flex; align-items: center; gap: .75rem;
  color: var(--fg-faint); font-size: .72rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
}
.prose .more::before, .prose .more::after { content: ""; flex: 1; border-top: 1px dashed var(--border-strong); }

/* ── Code ───────────────────────────────────────────────────────────── */

.prose :not(pre) > code {
  font-size: .86em;
  padding: .12em .36em;
  border-radius: 5px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  white-space: break-spaces;
}
.prose pre, pre.chroma, .highlight pre {
  font-size: .82rem;
  line-height: 1.65;
  color: var(--code-fg);
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  overflow-x: auto;
  tab-size: 4;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; white-space: pre; }

/* syntect (the garden): spans carry the scope's words as s-<word> classes. */
.s-comment { color: var(--hl-comment); font-style: italic; }
.s-keyword, .s-storage { color: var(--hl-keyword); }
.s-keyword.s-operator, .s-punctuation { color: var(--hl-punct); }
.s-string, .s-string .s-punctuation { color: var(--hl-string); }
.s-constant.s-character.s-escape { color: var(--hl-constant); }
.s-entity.s-name.s-function, .s-support.s-function, .s-variable.s-function { color: var(--hl-function); }
.s-entity.s-name.s-type, .s-entity.s-name.s-struct, .s-entity.s-name.s-enum, .s-entity.s-name.s-trait,
.s-entity.s-name.s-class, .s-support.s-type, .s-support.s-class, .s-storage.s-type.s-numeric,
.s-storage.s-type.s-primitive { color: var(--hl-type); }
.s-constant.s-numeric, .s-constant.s-language, .s-constant.s-other { color: var(--hl-constant); }
.s-support.s-macro, .s-entity.s-name.s-macro, .s-meta.s-annotation, .s-meta.s-attribute,
.s-entity.s-other.s-attribute-name { color: var(--hl-macro); }
.s-entity.s-name.s-tag { color: var(--hl-keyword); }
.s-markup.s-inserted { color: var(--hl-string); }
.s-markup.s-deleted { color: var(--hl-constant); }
.s-markup.s-heading { color: var(--hl-function); font-weight: 600; }
.s-comment .s-punctuation { color: inherit; }

/* Chroma (Hugo), the same colors. */
.chroma .c, .chroma .c1, .chroma .cm, .chroma .ch, .chroma .cs, .chroma .cpf { color: var(--hl-comment); font-style: italic; }
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kc, .chroma .ow, .chroma .nt { color: var(--hl-keyword); }
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc, .chroma .sd, .chroma .sh, .chroma .si,
.chroma .sr, .chroma .ss, .chroma .sx, .chroma .dl { color: var(--hl-string); }
.chroma .se { color: var(--hl-constant); }
.chroma .nf, .chroma .fm, .chroma .nx { color: var(--hl-function); }
.chroma .kt, .chroma .nc, .chroma .nn, .chroma .nb, .chroma .bp { color: var(--hl-type); }
.chroma .m, .chroma .mi, .chroma .mf, .chroma .mh, .chroma .mo, .chroma .mb, .chroma .il, .chroma .no { color: var(--hl-constant); }
.chroma .cp, .chroma .nd, .chroma .na, .chroma .fm { color: var(--hl-macro); }
.chroma .o, .chroma .p { color: var(--hl-punct); }
.chroma .gi { color: var(--hl-string); }
.chroma .gd { color: var(--hl-constant); }
.chroma .gh, .chroma .gu { color: var(--hl-function); font-weight: 600; }
.chroma .hl { display: block; background: var(--accent-soft); }
.chroma .lnt, .chroma .ln { color: var(--fg-faint); margin-right: 1em; user-select: none; }