/* Engine token compatibility — the captured engine CSS (engines.css) keeps
 * its var() references to HUB token names, per the pre-render decision.
 * This shim defines those hub names in terms of the port's canonical/brand
 * vocabulary so the fragments resolve identically in both themes. Scoped to
 * :root deliberately (additive names; no canonical collisions). */

:root {
    /* Hub semantic → port canonical. */
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary: var(--text-tertiary);
    --color-text-quaternary: var(--text-quaternary);
    --color-bg-primary: var(--surface-canvas);
    --color-border-translucent: #ffffff12;
    --color-border-translucent-strong: #ffffff1f;
    --color-bg-panel: #232322;
    --color-surface-code: var(--stone-950);
    --color-border-tertiary: #52524c;
    --color-teal: var(--teal-400);
    --color-orange: #fc7840;

    /* Hub brand aliases (their canonical names are --brand-dark-blue /
     * --brand-light-blue). */
    --brand-teal-dark: var(--brand-dark-blue);
    --brand-teal-light: var(--brand-light-blue);

    /* Hub type shorthands consumed by engine captions/labels. */
    --font-regular: var(--font-family-sans);
    --font-monospace: var(--font-family-label-mono);
    --text-mini: var(--text-mini-size) / var(--text-mini-line-height) var(--font-family-sans);
    --text-micro: var(--text-micro-size) / var(--text-micro-line-height) var(--font-family-sans);

    /* Hub radius/shadow names. */
    --radius-8: 8px;
    --radius-rounded: var(--radius-full);
    --radius-circle: 50%;
    --shadow-tiny: var(--shadow-xs);
    --shadow-low: var(--shadow-sm);

    /* Mockup set (Transcript engine) — hub §2.5c, carried whole. */
    --mockup-text-size: var(--text-small-size);
    --mockup-mark-size: 22px;
    --mockup-axis-gap: 10px;
    --mockup-axis: calc(var(--mockup-mark-size) + var(--mockup-axis-gap));
    --mockup-turn-gap: 16px;
    --mockup-block-gap: 22px;
    --mockup-frame-border: #ffffff12;
    --mockup-frame-radius: 12px;
    --mockup-frame-padding: 14px 16px 22px;
    --mockup-bubble-bg: var(--stone-850);
    --mockup-bubble-padding: 12px 16px 14px;
    --mockup-rail-width: 2px;
    --mockup-rail-done: var(--color-accent);
    --mockup-rail-live: #ffffff1f;
    --mockup-chart-1: var(--teal-400);
    --mockup-chart-2: var(--citron-400);
    --mockup-chart-3: var(--color-orange);
    --mockup-chart-4: var(--stone-450);
    --mockup-chart-1-region: var(--teal-900);
    --mockup-chart-2-region: var(--citron-900);
    --mockup-chart-3-region: color-mix(in srgb, var(--color-orange) 16%, var(--stone-900));
    --mockup-chart-plane: var(--stone-900);
    --mockup-chart-grid: #ffffff12;
    --mockup-code-font: var(--font-family-code-mono);
}

/* ============================================================
 * Page canvas — docs-local ruling (2026-09-09, Ivan).
 * The docs sit on the same ground as the homepage in dark and as the
 * Althea product in light, measured from each as rendered:
 *   homepage dark canvas   #0e0e0e   (flat; the well is gone)
 *   Althea app light pane  #fcfcfb
 * The pinned design-system values are stone-950 (#1a1a19) and stone-050
 * (#fcfcfa). This overrides the --surface-canvas alias here, in the
 * docs-local layer, rather than in the audited adapter block of brand.css,
 * which must keep pointing at --tt-color-bg-primary. Held for graduation
 * into the design system.
 * ============================================================ */
:root {
    --surface-canvas: #0e0e0e;
}

[data-theme='light'] {
    --surface-canvas: #fcfcfb;   /* the Althea app's light pane, measured */
    /* One teal in light (Ivan 2026-09-09): the Althea app's light accent,
     * #3c8286, for the primary button, the nav glyphs and every other
     * accent use. The pinned brand teal (#47696b) read too dark beside it. */
    --action-accent-bg: #3c8286;
    --color-accent: #3c8286;
    --color-border-translucent: #0000000f;
    --color-border-translucent-strong: #00000017;
    --color-bg-panel: #ffffff;
    --color-surface-code: var(--stone-150);
    --color-border-tertiary: var(--stone-400);
    --color-border-faint: #00000008;
    --color-teal: var(--brand-dark-blue);
    --mockup-frame-border: #0000000f;
    --mockup-bubble-bg: var(--stone-150);
    --mockup-rail-live: #00000017;
    --mockup-chart-1: var(--teal-700);
    --mockup-chart-2: var(--citron-700);
    --mockup-chart-3: color-mix(in srgb, var(--color-orange) 82%, var(--stone-900));
    --mockup-chart-4: var(--stone-550);
    --mockup-chart-1-region: var(--teal-200);
    --mockup-chart-2-region: var(--citron-200);
    --mockup-chart-3-region: color-mix(in srgb, var(--color-orange) 16%, var(--stone-000));
    --mockup-chart-plane: var(--stone-000);
    --mockup-chart-grid: #0000000f;
}

/* In the Next build, the transcript module is ordered after the prose list
 * reset and retains the base list rhythm. Keep that cascade result explicit
 * in the framework-free build. */
.prose .Transcript-module__KHGTVW__report li {
    margin-bottom: 8px;
}