/* Authored CSS entry — web-ui's own additions on top of the vendored
 * design-system bundle. Each import names the cascade layer it joins so
 * the rules sit at the right level of the cascade declared by layers.css.
 *
 * The vendored layers.css defines the layer ordering:
 *   reset, tokens, theme-chrome, base, layouts, components, utilities
 *
 * Authored shell pieces (header, app-shell composition, the left rail)
 * sit in the layouts layer because they are composition primitives owned
 * by this project. The header's classes (.nav-region, .nav-hamburger) are
 * project-owned layout primitives, not competing with vendored component
 * classes, so it belongs in layouts alongside the shell and sidebar. The
 * rail owns its own class names (.rail-nav / .rail-link) and its profile
 * popover uses the vendored data-placement contract for the upward,
 * start-aligned placement rather than a hand-rolled anchor override. The
 * drawer variant is a component variant and sits in the components layer
 * beside the vendored drawer.css.
 */

@import url("components/icons-extended.css") layer(tokens);
/* Editorial AI theme preset — interim authored sidecar (see the file header and
 * editorial-ai-design-preset-plan-reference.md §6.1). No layer() clause: the file
 * names its own layers (tokens for the preset body, theme-chrome for the accent
 * pin) so each half lands at the right cascade level. */
@import url("theme-editorial-ai.css");
@import url("base/appearance.css") layer(base);
@import url("layouts/app-shell.css") layer(layouts);
@import url("layouts/app-header.css") layer(layouts);
@import url("layouts/app-sidebar.css") layer(layouts);
@import url("components/app-topbar.css") layer(components);
@import url("components/detail-action-bar.css") layer(components);
@import url("components/detail-screen.css") layer(components);
@import url("components/app-drawer.css") layer(components);
@import url("components/profile-menu.css") layer(components);
@import url("components/chat-page.css") layer(components);
@import url("components/chat-panel.css") layer(components);
@import url("components/voice-composer.css") layer(components);
@import url("components/library-page.css") layer(components);
@import url("components/search-page.css") layer(components);
@import url("components/overview-page.css") layer(components);
@import url("components/newsroom-page.css") layer(components);
@import url("components/alpha-newsroom.css") layer(components);
@import url("components/work-rail.css") layer(components);
@import url("components/newsroom-workspace.css") layer(components);
@import url("components/newsroom-story-detail.css") layer(components);
@import url("components/story-file.css") layer(components);
@import url("components/video-production.css") layer(components);
@import url("components/story-preview.css") layer(components);
@import url("components/watchlist-detail.css") layer(components);
@import url("components/settings-page.css") layer(components);
@import url("components/ai-providers.css") layer(components);
@import url("components/topics.css") layer(components);
@import url("components/harness-admin.css") layer(components);
@import url("components/harness-authoring.css") layer(components);
@import url("components/workflow-run.css") layer(components);
@import url("components/identity-page.css") layer(components);
@import url("components/command-palette.css") layer(components);
@import url("components/chat-search-dialog.css") layer(components);
@import url("components/combobox.css") layer(components);
@import url("components/text-editor-omni.css") layer(components);
@import url("components/story-body-editor.css") layer(components);
@import url("components/portal-dialog.css") layer(components);
@import url("components/story-activity.css") layer(components);
@import url("components/kinetic-captions.css") layer(components);
@import url("components/subject-overlay.css") layer(components);
@import url("components/feedback-canvas.css") layer(components);
@import url("components/toast.css") layer(components);

/* Authored utilities — single-purpose helpers that win over the
 * component-layer element rules by virtue of the later utilities layer. */
@import url("utilities/text-meta.css") layer(utilities);
@import url("utilities/thumbnail-fallback.css") layer(utilities);

/* Authored token aliases — additive only. These join the tokens layer and
 * name new tokens that resolve to vendored primitives/semantic tokens; they
 * never override a vendored token name (DESIGN.md "Extending tokens"). Later
 * parallel work references these; do not edit this file from those lanes. */
@layer tokens {
    :root {
        /* Caption kinetic palette (video fix-forward C1/C2).
         * FIXED across light/dark by design: already-spoken words must stay
         * black in dark mode, so these alias raw gray/brand primitives, not
         * theme text tokens (which flip with appearance). Only the current
         * word follows the brand. */
        --caption-word-current: var(--color-primary); /* brand-following (deprecated alias -> --color-action; the only brand-following caption state) */
        --caption-word-spoken: var(--gray-9);          /* near-black, fixed */
        --caption-word-pending: var(--gray-4);         /* light grey, fixed */
        --caption-backing: var(--gray-2);              /* grey backing, fixed */

        /* Subject-detection box palette (video fix-forward B5).
         * Three theme-aware, hue-distinct kinds mapped to existing semantic
         * status tokens (each is light-dark() in the vendored layer, so the
         * boxes adapt to appearance). Blue / amber / green are separated on
         * the hue wheel for at-a-glance distinction; red (--color-error) is
         * deliberately avoided because red on a video monitor reads as a
         * recording/error signal. */
        --subject-person: var(--color-info);    /* blue */
        --subject-face: var(--color-warning);   /* amber/yellow */
        --subject-object: var(--color-success); /* green */
    }
}