@import "./tokens.css";
/* abhyas docs: GitHub's (Primer) colours, light and dark. */
:root {
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --docs-bg: var(--docs-dark-bg); --docs-fg: var(--docs-dark-fg); --docs-muted: var(--docs-dark-muted); --docs-border: var(--docs-dark-border); --docs-subtle: var(--docs-dark-subtle); --docs-accent: var(--docs-dark-accent); --docs-accent-bg: var(--docs-dark-accent-bg); }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--docs-bg); color: var(--docs-fg); font: var(--font-size-heading-small)/var(--line-height-reading) var(--font-family-ui); }
a { color: var(--docs-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-12) var(--space-16); border-bottom: var(--border-width-1) solid var(--docs-border); background: var(--docs-subtle); }
header a { color: var(--docs-fg); font-weight: var(--font-weight-semibold); }
.brand span { color: var(--docs-muted); font-weight: var(--font-weight-regular); }
.layout { display: flex; max-width: var(--size-1100); margin: 0 auto; }
nav { flex: 0 0 var(--size-220); padding: var(--space-24) var(--space-16); border-right: var(--border-width-1) solid var(--docs-border); position: sticky; top: 0; align-self: flex-start; }
nav a { display: block; padding: var(--space-6) var(--space-10); border-radius: var(--radius-6); color: var(--docs-fg); font-size: var(--font-size-body); }
nav a:hover { background: var(--docs-subtle); text-decoration: none; }
nav a[aria-current="page"] { background: var(--docs-accent-bg); color: var(--docs-accent); font-weight: var(--font-weight-semibold); }
main { flex: 1; min-width: 0; padding: var(--space-24) var(--space-32) var(--space-64); }
h1 { font-size: var(--font-size-32); margin: 0 0 var(--space-16); padding-bottom: var(--space-8); border-bottom: var(--border-width-1) solid var(--docs-border); }
h2 { font-size: var(--font-size-22); margin: var(--space-32) 0 var(--space-12); padding-bottom: var(--space-6); border-bottom: var(--border-width-1) solid var(--docs-border); }
.lead { font-size: var(--font-size-18); }
code { font: var(--font-size-docs-code) var(--font-family-docs-code); background: var(--docs-subtle); padding: var(--space-2) var(--space-5); border-radius: var(--radius-6); }
pre { background: var(--docs-subtle); border: var(--border-width-1) solid var(--docs-border); border-radius: var(--radius-6); padding: var(--space-16); overflow-x: auto; font: var(--font-size-13-px)/var(--line-height-body) var(--font-family-docs-code); }
.table { overflow-x: auto; margin: var(--space-16) 0; }
table { border-collapse: collapse; width: 100%; font-size: var(--font-size-body); }
th, td { border: var(--border-width-1) solid var(--docs-border); padding: var(--space-6) var(--space-12); text-align: left; vertical-align: top; }
th { background: var(--docs-subtle); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--size-240), 1fr)); gap: var(--space-12); }
.card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-14) var(--space-16); border: var(--border-width-1) solid var(--docs-border); border-radius: var(--radius-6); color: var(--docs-fg); }
.card:hover { border-color: var(--docs-accent); text-decoration: none; }
.card span { color: var(--docs-muted); font-size: var(--font-size-body); }
.button { display: inline-block; padding: var(--space-6) var(--space-16); border-radius: var(--radius-6); background: var(--primary); color: var(--on-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-body); }
.button:hover { background: var(--correct); text-decoration: none; }
@media (max-width: 760px) /* breakpoint:docs */ {
  .layout { flex-direction: column; }
  nav { position: static; border-right: 0; border-bottom: var(--border-width-1) solid var(--docs-border); display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-12) var(--space-16); }
  main { padding: var(--space-16); }
}