/* The shared sheet: the photocopied-zine language from the punk-new skeleton,
 * scaled to a whole site. Linked by BOTH Stencil engines - the landing layout
 * and the docs wrapper - so the brand tokens, the wordmark, the site header
 * and the Eshu token colours live here and nowhere else.
 *
 * Everything is local: system fonts, CSS gradients for the halftone, no
 * images, no script, no webfont. */

:root {
    --paper:  #e9e7e2;   /* copier stock: grey, not cream */
    --ink:    #15151a;
    --muted:  #56555e;
    --smudge: rgba(21, 21, 26, .09);

    /* The two spot colours are printed inks: they do not change with the
     * theme, and neither does what is legible on top of them. --ink flips
     * between themes, so using it on yellow would put near-white text on
     * #ffe600 in the dark. These pairings are fixed for that reason. */
    --hot:     #ff2d6b;
    --on-hot:  #ffffff;
    --acid:    #ffe600;
    --on-acid: #15151a;

    --stack:  ui-sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono:   ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    --serif:  ui-serif, Georgia, "Times New Roman", serif;

    /* Eshu token colours, in theme blocks below: the keyword ink is the
     * hot pink, strings lean acid, the rest stay legible neutrals. */
    --esh-k: #c2003f;
    --esh-s: #6f6200;
    --esh-c: #74727b;
    --esh-n: #0550ae;
    --esh-p: #8250df;
    --esh-r: #116329;
    --esh-v: #953800;
    --esh-h: #6f6200;
    --esh-d: #74727b;
    --esh-g: #116329;
    --esh-a: #0550ae;
}

/* Only the ground and its ink move between themes; style through the tokens
 * above, never inside a theme block. */
@media (prefers-color-scheme: dark) {
    :root {
        --paper:  #0e0e12;
        --ink:    #eceae4;
        --muted:  #a5a3ad;
        --smudge: rgba(236, 234, 228, .08);

        --esh-k: #ff5c8a;
        --esh-s: #ffe600;
        --esh-c: #8f8d95;
        --esh-n: #79c0ff;
        --esh-p: #d2a8ff;
        --esh-r: #7ee787;
        --esh-v: #ffa657;
        --esh-h: #ffe600;
        --esh-d: #8f8d95;
        --esh-g: #7ee787;
        --esh-a: #79c0ff;
    }
}

/* An explicit choice wins over the system preference, in both directions. */
:root[data-theme="dark"] {
    --paper:  #0e0e12;
    --ink:    #eceae4;
    --muted:  #a5a3ad;
    --smudge: rgba(236, 234, 228, .08);

    --esh-k: #ff5c8a;
    --esh-s: #ffe600;
    --esh-c: #8f8d95;
    --esh-n: #79c0ff;
    --esh-p: #d2a8ff;
    --esh-r: #7ee787;
    --esh-v: #ffa657;
    --esh-h: #ffe600;
    --esh-d: #8f8d95;
    --esh-g: #7ee787;
    --esh-a: #79c0ff;
}

:root[data-theme="light"] {
    --paper:  #e9e7e2;
    --ink:    #15151a;
    --muted:  #56555e;
    --smudge: rgba(21, 21, 26, .09);

    --esh-k: #c2003f;
    --esh-s: #6f6200;
    --esh-c: #74727b;
    --esh-n: #0550ae;
    --esh-p: #8250df;
    --esh-r: #116329;
    --esh-v: #953800;
    --esh-h: #6f6200;
    --esh-d: #74727b;
    --esh-g: #116329;
    --esh-a: #0550ae;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    /* the xerox grain: two offset dot grids, resolution-independent */
    background-image:
        radial-gradient(var(--smudge) 1px, transparent 1.1px),
        radial-gradient(var(--smudge) 1px, transparent 1.1px);
    background-size: 7px 7px, 11px 11px;
    background-position: 0 0, 3px 4px;
    color: var(--ink);
    font: 16px/1.65 var(--stack);
    -webkit-text-size-adjust: 100%;
}

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

a {
    color: inherit;
    text-decoration-color: var(--hot);
    text-decoration-thickness: 3px;
}

/* ---- the wordmark -------------------------------------------------------- */
/* Lifted from the punk-new skeleton: a ransom note is cut from whatever was
 * to hand, so no two letters share a face, a size or an angle. */

.wordmark {
    display: flex;
    align-items: flex-end;
    gap: .3rem;
    margin: 0;
    line-height: 1;
}

.wordmark b {
    display: inline-block;
    padding: .16rem .42rem;
    background: var(--ink);
    color: var(--paper);
    font: 900 1rem/1 var(--stack);
}

.wordmark b:nth-child(1) { transform: rotate(-5deg); }
.wordmark b:nth-child(2) {
    background: var(--hot);
    color: var(--on-hot);
    font-family: var(--serif);
    font-size: 1.3rem;
    font-style: italic;
    transform: rotate(4deg);
}
.wordmark b:nth-child(3) {
    font-family: var(--mono);
    font-size: .9rem;
    transform: rotate(-2deg);
}
.wordmark b:nth-child(4) {
    background: var(--acid);
    color: var(--on-acid);
    font-size: 1.25rem;
    transform: rotate(6deg);
}

/* ---- the site header ----------------------------------------------------- */
/* The same block appears in the landing layout and the docs wrapper. */

.site-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.1rem 1.25rem;
    border-bottom: 4px solid var(--ink);
}

.site-brand { text-decoration: none; }
.site-brand:hover .wordmark b:nth-child(2) { transform: rotate(-3deg); }

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.1rem;
    margin-left: auto;
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--hot); }

/* ---- the site footer ----------------------------------------------------- */

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.2rem 1.25rem 2.5rem;
    border-top: 3px dashed var(--ink);
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.tape {
    padding: .25rem .6rem;
    background: var(--ink);
    color: var(--paper);
    font-weight: 900;
    transform: rotate(-2deg);
}

.sticker {
    padding: .35rem .7rem;
    background: var(--acid);
    color: var(--on-acid);
    border: 2px solid var(--on-acid);
    font-weight: 900;
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    transform: rotate(7deg);
}

/* ---- syntax highlighting (Eshu token classes) ---------------------------- */
/* One set of rules for the landing snippets and every fenced block in /docs. */

.esh-k { color: var(--esh-k); }
.esh-s { color: var(--esh-s); }
.esh-c { color: var(--esh-c); font-style: italic; }
.esh-n { color: var(--esh-n); }
.esh-p { color: var(--esh-p); }
.esh-r { color: var(--esh-r); }
.esh-v { color: var(--esh-v); }
.esh-h { color: var(--esh-h); }
.esh-d { color: var(--esh-d); font-style: italic; }
.esh-g { color: var(--esh-g); }
.esh-a { color: var(--esh-a); }