/* 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 surface steps consumed by inline SVG fills. */
    --color-bg-secondary: var(--stone-875);
    --color-bg-tertiary: var(--stone-850);

    /* 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);
    --border-hairline-alias: var(--border-hairline);

    /* 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);
}

[data-theme='light'] {
    --color-bg-secondary: var(--stone-150);
    --color-bg-tertiary: var(--stone-200);
    --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;
}