/* tabichat.dev — palette and site rules. Single source for index.html, humans.html and
   pricing.html: link this file, do not paste these rules back into a page.
   Sumi.css supplies the layout and components; this only carries the ruled palette and the
   few rules Sumi does not provide. */
        /* The owner's ruled palette — the venya-media :root token block, copied verbatim from
           /tabith/VENYA-WEBSITE-COLORS.md §2 (tabichat.dev uses the same color scheme as venya.ai).
           Accents carry meaning; --brand is emphasis/good outcomes and stays OFF human-actor
           elements (marketing/AGENTS.md:20-24).
           In this version those colors are carried THROUGH Sumi's token names, so the palette is
           unchanged and Sumi does the layout. The page is dark by ruling, so data-theme is pinned. */
        :root,
        :root[data-theme="dark"] {
            --s-bg:            #282828;   /* was --bg */
            --s-surface:       #2d2d2d;   /* was --panel */
            --s-card:          #343434;   /* was --card */
            --s-card-section:  #343434;
            --s-code-bg:       #343434;
            --s-border:        #494949;   /* was --border */
            --s-border-strong: #545454;   /* was --line */
            --s-text:          #eeeeee;   /* was --text, --core */
            --s-muted:         #b9b9b9;   /* was --text-2 */
            --s-primary:       #73cef4;   /* was --brand — emphasis and GOOD OUTCOMES only */
            --s-on-primary:    #282828;
            --s-success:       #9faa00;   /* was --ok */
            --s-danger:        #f43753;   /* was --danger */

            /* Faces: same stacks as the ruled page, resolved against Sumi's own token names.
               No webfont is fetched — both names fall back to the local system stack offline. */
            --s-font-body: "Inter", system-ui, sans-serif;
            --s-font-mono: "JetBrains Mono", ui-monospace, monospace;

            /* Actor colours are tabichat's own vocabulary, not Sumi's, so they stay as themselves.
               --human is deliberately NOT mapped to an emphasis token: brand stays off it. */
            --human:  #b3deef;   /* Tender pale — the human actor */
            --agent:  #c9d05c;   /* the agent actor */
            --core:   #eeeeee;   /* neutral white = core component */
            --secret: #ffc24b;   /* a secret */
        }

        /* ---- Additions Sumi does not provide. `.card` is NOT a Sumi class (checked against
           sumi.css before use), so nothing here shadows or is shadowed by the library. ---- */
        main > section { padding-block: 1.25rem; border-bottom: 1px solid var(--s-border); }
        main > section:last-of-type { border-bottom: none; }

        .hero { padding-block-start: 0; display: flex; flex-direction: column;
                align-items: flex-start; gap: var(--s-space); }
        .hero img { width: 200px; height: auto; margin-inline: auto;
                    border-radius: var(--s-radius); }

        .card {
            background: var(--s-surface);
            border: 1px solid var(--s-border);
            border-radius: var(--s-radius);
            padding: 1.25rem;
        }
        .card > :last-child { margin-bottom: 0; }
        .actor-human { color: var(--human); }
        .actor-agent { color: var(--agent); }

        /* The one-line architecture diagram: three nodes, two arrows, mono face. */
        .flow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
                margin-block: var(--s-space) 0; font-family: var(--s-font-mono); font-size: .9rem; }
        .node { background: var(--s-card); border: 1px solid var(--s-border);
                border-radius: calc(var(--s-radius) / 1.33); padding: .3rem .7rem; }
        .node-broker { border-color: var(--s-border-strong); color: var(--core); }
        .arrow { color: var(--s-muted); }

        /* Start-it-up block. Kept as a styled <p> with the same line breaks as index.html. */
        .term { font-family: var(--s-font-mono); background: var(--s-surface);
                border: 1px solid var(--s-border); border-radius: var(--s-radius);
                padding: 1rem 1.25rem; color: var(--s-text); overflow-x: auto; }
        .term .c { color: var(--s-muted); }

        .lead-word { color: var(--s-primary); font-weight: 600; }
        .asof { color: var(--s-muted); font-size: .9rem; margin-top: 1.25rem; }
        footer { text-align: center; }
        main section h3 { margin-block: 0 .35rem; }

        /* ---- Page head: the logo, then the menu bar pinned under it. Sumi already styles nav,
           nav ul, nav a and [aria-current]; this adds the brand block and the pinning. ---- */
        .brand { display: block; text-align: center; padding-block-start: 1rem; }
        .brand img { width: 200px; height: auto; border-radius: var(--s-radius); }
        nav.spa-bar { position: sticky; top: 0; z-index: 10; background: var(--s-bg);
                      border-bottom: 1px solid var(--s-border); padding-block: .6rem;
                      margin-block-start: .75rem; }
        #overview h3, #why h3 { margin-block: 0 .35rem; }
        footer { color: var(--s-muted); font-size: .9rem; }