/*
Copyright 2026 Element Creations Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/*
 * Match the app/web shell baseline without importing app/web component styles.
 * Shared component stories should inherit the same root typography and font
 * feature settings as the real app, while still owning their component styling.
 */
@layer app-web {
    :root[data-storybook-root-css="app-web"] {
        [class^="cpd-theme"][class^="cpd-theme"] {
            --cpd-font-family-sans:
                "Inter", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
                "Noto Color Emoji";
        }

        body {
            font: var(--cpd-font-body-md-regular) !important;
            letter-spacing: var(--cpd-font-letter-spacing-body-md) !important;
            font-feature-settings:
                "kern" 1,
                "liga" 1,
                "calt" 1 !important;

            background-color: var(--cpd-color-bg-canvas-default);
            color: var(--cpd-color-text-primary);
            border: 0;
            margin: 0;

            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        pre,
        code {
            font-family:
                "Fira Code", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji";
            font-size: 100% !important;
        }
    }

    /* Username color classes - these are defined in the main app's _common.pcss
   but need to be available in Storybook for components that use colorClass */
    .mx_Username_color1 {
        color: var(--cpd-color-text-decorative-1);
    }

    .mx_Username_color2 {
        color: var(--cpd-color-text-decorative-2);
    }

    .mx_Username_color3 {
        color: var(--cpd-color-text-decorative-3);
    }

    .mx_Username_color4 {
        color: var(--cpd-color-text-decorative-4);
    }

    .mx_Username_color5 {
        color: var(--cpd-color-text-decorative-5);
    }

    .mx_Username_color6 {
        color: var(--cpd-color-text-decorative-6);
    }
}