/*
 * X12 Mapping Workspace (V3 Pro) design tokens.
 * Scoped to .mw-root so the rest of NaviEDI is unaffected.
 *
 * Surfaces / text / borders follow the active MudBlazor theme via --mud-palette-*.
 * Brand teal and status colors stay fixed in both modes.
 * App bar and preview pane swap palettes between light and dark.
 */

.mw-root {
    /* Brand — fixed */
    --c-primary: #00ACC1;
    --c-primary-strong: #00838F;

    /* Status — fixed */
    --c-success: #7CB342;
    --c-warning: #FFB74D;
    --c-error: #EF5350;

    /* Surfaces / text / borders — inherit MudBlazor theme (fallbacks = design light values) */
    --c-bg: var(--mud-palette-background, #FAFAFA);
    --c-surface: var(--mud-palette-surface, #FFFFFF);
    /* Rail + footer pick up the Navi drawer tint so they feel native to the app */
    --c-surface-2: var(--mud-palette-drawer-background, #e6f2f4);
    --c-border: var(--mud-palette-lines-default, #E0E0E0);
    --c-border-strong: var(--mud-palette-lines-inputs, #BDBDBD);
    --c-text: var(--mud-palette-text-primary, #212121);
    --c-text-2: var(--mud-palette-text-secondary, #616161);
    --c-text-3: var(--mud-palette-text-disabled, #9E9E9E);

    /* Soft tints — light-mode defaults */
    --c-primary-soft: #E0F7FA;
    --c-success-soft: #F1F8E9;
    --c-warning-soft: #FFF3E0;
    --c-error-soft: #FFEBEE;
    --c-info-soft: #E3F2FD;

    /* ── App bar — LIGHT: white chrome with teal accents and a bottom border ── */
    --mw-appbar-bg: #FFFFFF;
    --mw-appbar-border: 1px solid var(--c-border);
    --mw-appbar-text: var(--c-text);
    --mw-appbar-subtle: var(--c-text-2);
    --mw-appbar-strong: var(--c-text);
    --mw-appbar-pill-bg: rgba(0, 0, 0, .06);
    --mw-appbar-pill-border: rgba(0, 0, 0, .08);
    --mw-appbar-ghost-text: var(--c-primary-strong);
    --mw-appbar-ghost-border: var(--c-primary-strong);
    --mw-appbar-ghost-hover: var(--c-primary-soft);
    --mw-appbar-primary-bg: var(--c-primary);
    --mw-appbar-primary-text: #FFFFFF;
    --mw-appbar-primary-hover: var(--c-primary-strong);

    /* ── Preview pane — LIGHT: clean paper with teal accents ── */
    --mw-preview-bg: var(--c-surface-2);
    --mw-preview-border: 1px solid var(--c-border);
    --mw-preview-label: var(--c-text-3);
    --mw-preview-body: var(--c-text-2);
    --mw-preview-tag: var(--c-primary-strong);
    --mw-preview-value: var(--c-text);
    --mw-preview-sep: var(--c-text-3);
    --mw-preview-missing: var(--c-error);
    --mw-preview-focused-bg: rgba(255, 183, 77, .35);
    --mw-preview-focused-fg: #6E3A00;

    /* ── Element row tags — LIGHT ── */
    --mw-tag-composite-bg: #F3E5F5;
    --mw-tag-composite-text: #6A1B9A;
    --mw-tag-composite-border: #CE93D8;

    --mw-tag-conditional-bg: #E3F2FD;
    --mw-tag-conditional-text: #0D47A1;
    --mw-tag-conditional-border: #90CAF9;

    --mw-tag-pointer-bg: #E0F2F1;
    --mw-tag-pointer-text: #00695C;
    --mw-tag-pointer-border: #80CBC4;

    --mw-tag-qualifier-bg: #FFF3E0;
    --mw-tag-qualifier-text: #E65100;
    --mw-tag-qualifier-border: #FFB74D;

    --mw-tag-repeating-bg: #6A1B9A;
    --mw-tag-repeating-text: #FFFFFF;

    /* Composite sub-row tint (rendered when parent expanded) */
    --mw-sub-row-bg: #FAF7FC;
    --mw-sub-row-pos: #6A1B9A;

    /* ── Mapping pills — LIGHT ── */
    --mw-pill-field-bg: #E3F2FD;
    --mw-pill-field-text: #0D47A1;
    --mw-pill-field-border: #90CAF9;

    --mw-pill-literal-bg: #FFF3E0;
    --mw-pill-literal-text: #8B5000;
    --mw-pill-literal-border: #FFCC80;

    --mw-pill-expr-bg: #F3E5F5;
    --mw-pill-expr-text: #6A1B9A;
    --mw-pill-expr-border: #CE93D8;

    --mw-pill-group-bg: #EDE7F6;
    --mw-pill-group-text: #4527A0;
    --mw-pill-group-border: #B39DDB;

    /* Typography */
    --font-ui: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", Consolas, "Courier New", monospace;

    /* Shadow */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .08);
}

.mw-root[data-theme="dark"] {
    /* Transparent tints so status washes blend into dark surfaces */
    --c-primary-soft: rgba(0, 172, 193, .18);
    --c-success-soft: rgba(124, 179, 66, .18);
    --c-warning-soft: rgba(255, 183, 77, .18);
    --c-error-soft: rgba(239, 83, 80, .22);
    --c-info-soft: rgba(144, 202, 249, .18);

    /* ── App bar — DARK: branded teal chrome with white contents ── */
    --mw-appbar-bg: var(--c-primary);
    --mw-appbar-border: 1px solid transparent;
    --mw-appbar-text: #FFFFFF;
    --mw-appbar-subtle: rgba(255, 255, 255, .85);
    --mw-appbar-strong: #FFFFFF;
    --mw-appbar-pill-bg: rgba(255, 255, 255, .18);
    --mw-appbar-pill-border: rgba(255, 255, 255, .24);
    --mw-appbar-ghost-text: #FFFFFF;
    --mw-appbar-ghost-border: rgba(255, 255, 255, .4);
    --mw-appbar-ghost-hover: rgba(255, 255, 255, .08);
    --mw-appbar-primary-bg: #FFFFFF;
    --mw-appbar-primary-text: var(--c-primary-strong);
    --mw-appbar-primary-hover: #F0FBFC;

    /* ── Preview pane — DARK: terminal ── */
    --mw-preview-bg: #1E2024;
    --mw-preview-border: 1px solid transparent;
    --mw-preview-label: #4A6469;
    --mw-preview-body: #B2DFDB;
    --mw-preview-tag: #4DD0E1;
    --mw-preview-value: #FFAB91;
    --mw-preview-sep: #4A6469;
    --mw-preview-missing: #EF5350;
    --mw-preview-focused-bg: rgba(255, 183, 77, .25);
    --mw-preview-focused-fg: #FFCC80;

    /* ── Element row tags — DARK ── */
    --mw-tag-composite-bg: rgba(206, 147, 216, .15);
    --mw-tag-composite-text: #CE93D8;
    --mw-tag-composite-border: rgba(206, 147, 216, .35);

    --mw-tag-conditional-bg: rgba(144, 202, 249, .15);
    --mw-tag-conditional-text: #90CAF9;
    --mw-tag-conditional-border: rgba(144, 202, 249, .35);

    --mw-tag-pointer-bg: rgba(128, 203, 196, .15);
    --mw-tag-pointer-text: #80CBC4;
    --mw-tag-pointer-border: rgba(128, 203, 196, .35);

    --mw-tag-qualifier-bg: rgba(255, 183, 77, .15);
    --mw-tag-qualifier-text: #FFB74D;
    --mw-tag-qualifier-border: rgba(255, 183, 77, .35);

    --mw-tag-repeating-bg: #B39DDB;
    --mw-tag-repeating-text: #1A1A1A;

    /* Composite sub-row tint — dark variant */
    --mw-sub-row-bg: rgba(206, 147, 216, .08);
    --mw-sub-row-pos: #CE93D8;

    /* ── Mapping pills — DARK ── */
    --mw-pill-field-bg: rgba(144, 202, 249, .15);
    --mw-pill-field-text: #90CAF9;
    --mw-pill-field-border: rgba(144, 202, 249, .35);

    --mw-pill-literal-bg: rgba(255, 204, 128, .15);
    --mw-pill-literal-text: #FFCC80;
    --mw-pill-literal-border: rgba(255, 204, 128, .35);

    --mw-pill-expr-bg: rgba(206, 147, 216, .15);
    --mw-pill-expr-text: #CE93D8;
    --mw-pill-expr-border: rgba(206, 147, 216, .35);

    --mw-pill-group-bg: rgba(179, 157, 219, .15);
    --mw-pill-group-text: #B39DDB;
    --mw-pill-group-border: rgba(179, 157, 219, .35);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
}