/*** start Base ***/

:root {
    color-scheme: light;
    --ink: #101820;
    --muted: #52616b;
    --line: #dde5dc;
    --surface: #ffffff;
    --page: #ffffff;
    --green: #0f766e;
    --blue: #2563eb;
    --amber: #b45309;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--page);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    line-height: 1.25;
}

#app {
    min-height: 100vh;
}

.fai-link {
    color: inherit;
    text-decoration: none;
}

.fai-image {
    display: block;
    height: auto;
}

/*** end Base ***/


/*** start Layout ***/

@media (max-width: 820px) {
    .responsive-row {
        flex-direction: column;
        gap: 32px;
    }

    .site-topbar {
        align-items: flex-start;
    }
}

/*** end Layout ***/


/*** start Code Blocks ***/

pre {
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    clear: both;
    background: #1b1b1b;
    padding: 0;
    tab-size: 4;
    word-break: normal;
    hyphens: none;
    position: relative;
    line-height: 28px;
    border-radius: 8px;
    overflow: hidden;
    /* Column-flex so <code> can stretch to fill the <pre> when the
       parent layout (e.g. a flex-row with align-items: stretch)
       forces a taller height than the code's own content needs.
       Without this, short snippets leave dead dark space below. */
    display: flex;
    flex-direction: column;
    /* Fallback colour for any token text that doesn't match a tok-* rule. */
    color: #d4d4d4;
}

pre code {
    background: none;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    display: block;
    /* Grow to fill the <pre> vertically; min-width keeps narrow
       columns sane on mobile. */
    flex: 1;
    max-width: 100%;
    min-width: 100px;
    font-size: 14px;
    padding: 16px 20px;
    line-height: 1.65;
    /* Keep `==`, `->`, etc. literal — programmer ligatures hurt readability. */
    font-variant-ligatures: none;
    font-feature-settings: "calt" 0, "liga" 0;
}

/* Syntax-highlight palette. Tokens emitted by util.tokenize get a
   `tok-<kind>` class via Forui's `cssClass` modifier. */
.tok-kw    { color: #c084fc; }   /* keywords: def, do, end, let, var, if, ... */
.tok-typ   { color: #22d3ee; }   /* types and components: Int, String, VStack */
.tok-str   { color: #86efac; }   /* string literals */
.tok-num   { color: #fbbf24; }   /* numeric literals */
.tok-cmt   { color: #6b7280; font-style: italic; }  /* line comments */
.tok-ann   { color: #fb923c; }   /* @param, @return, @type, ... */
.tok-fn    { color: #f472b6; }   /* function-name positions (reserved for future) */
.tok-plain { color: inherit; }   /* identifiers, punctuation, whitespace */

/* Selected code remains readable against the dark background. */
pre ::selection {
    background: #f5d67b;
    color: #1b1b1b;
}

/*** end Code Blocks ***/