/* ==========================================================================
   BOOTSTRAP 5.3 VARIABLE MAPPINGS — SHARED
   ========================================================================== */
:root {
    /* ============================================================
       BRAND
       ============================================================ */
    --bs-primary: var(--ws-primary);
    --bs-primary-rgb: var(--ws-primary-rgb);
    --bs-secondary: var(--ws-secondary);
    --bs-success: var(--ws-success);
    --bs-info: var(--ws-info);
    --bs-warning: var(--ws-warning);
    --bs-danger: var(--ws-danger);
    /* ============================================================
       SHAPE / RADIUS
       ============================================================ */
    --bs-border-radius: calc(var(--ws-border-radius) / 4);
    --bs-border-radius-sm: calc(var(--ws-border-radius) / 4);
    --bs-border-radius-lg: var(--ws-border-radius);
    --bs-border-radius-xl: var(--ws-border-radius);
    --bs-border-radius-xxl: calc(var(--ws-border-radius) * 2);
    --bs-border-radius-2xl: calc(var(--ws-border-radius) * 2);
    /* ============================================================
       LINKS / FOCUS
       ============================================================ */
    --bs-link-color: var(--ws-primary);
    --bs-link-hover-color: var(--ws-primary-hover);
    --bs-focus-ring-color: rgba(var(--ws-primary-rgb), .25);
    /* ============================================================
       BORDERS — BASE (OVERRIDDEN PER THEME)
       ============================================================ */
    --bs-border-color: var(--ws-border-base);
    --bs-border-color-translucent: var(--ws-border-muted);
    --bs-border-color-subtle: var(--ws-border-muted);
    /* ============================================================
       SEMANTIC BORDER TOKENS
       ============================================================ */
    --bs-primary-border-subtle: var(--ws-border-primary);
    --bs-secondary-border-subtle: var(--ws-border-secondary);
    --bs-success-border-subtle: var(--ws-border-success);
    --bs-info-border-subtle: var(--ws-border-info);
    --bs-warning-border-subtle: var(--ws-border-warning);
    --bs-danger-border-subtle: var(--ws-border-danger);
    /* ============================================================
       BODY COLORS
       ============================================================ */
    --bs-body-bg: var(--ws-bg-body);
    --bs-body-color: var(--ws-text-base);
    --bs-body-color-rgb: var(--ws-text-base-rgb);
    --bs-text-muted: var(--ws-text-muted);
    --bs-secondary-color: var(--ws-text-secondary);
    --bs-secondary-color-rgb: var(--ws-text-secondary-rgb);
    /* ============================================================
       FONTS
       ============================================================ */
    --bs-font-sans-serif: var(--ws-font-family);
}

/* ==========================================================================
   SYNCFUSION VARIABLES — SHARED (MODE-INDEPENDENT)
   ========================================================================== */
:root {
    /* ============================================================
       CONTENT / TEXT / ICONS
       ============================================================ */
    --color-sf-content-bg-color: var(--ws-bg-base);
    --color-sf-content-bg-color-alt1: var(--ws-bg-alt);
    --color-sf-content-bg-color-alt2: var(--ws-bg-muted);
    --color-sf-content-text-color: var(--ws-text-base);
    --color-sf-content-text-color-hover: var(--ws-text-base-hover);
    --color-sf-content-text-color-pressed: var(--ws-text-base-pressed);
    --color-sf-content-text-color-focus: var(--ws-text-base-focus);
    --color-sf-content-text-color-selected: var(--ws-text-selection);
    --color-sf-content-text-color-disabled: var(--ws-text-muted);
    --color-sf-placeholder-text-color: var(--ws-text-secondary);
    --color-sf-icon-color: var(--ws-text-base);
    --color-sf-icon-color-hover: var(--ws-text-base-hover);
    --color-sf-icon-color-pressed: var(--ws-text-base-pressed);
    --color-sf-icon-color-disabled: var(--ws-text-muted);
    /* Additional alt text colors */
    --color-sf-content-text-color-alt1: var(--ws-text-secondary);
    --color-sf-content-text-color-alt2: var(--ws-text-muted);
    /* Extra text alts from SF defaults (optional but safe) */
    --color-sf-content-text-color-alt3: var(--ws-text-muted);
    --color-sf-content-text-color-alt4: var(--ws-text-muted);
    --color-sf-content-text-color-alt5: var(--ws-text-muted);
    /* ============================================================
       SELECTION / BORDERS
       ============================================================ */
    --e-radius: var(--ws-border-radius);
    --color-sf-border: var(--ws-border-base);
    --color-sf-border-light: var(--ws-border-muted);
    --color-sf-border-dark: var(--ws-border-base);
    --color-sf-border-disabled: var(--ws-border-disabled);
    --color-sf-border-hover: var(--ws-border-primary-hover);
    --color-sf-border-focus: var(--ws-border-focus);
    --color-sf-border-selected: var(--ws-border-primary);
    --color-sf-flyout-border: var(--ws-border-muted);
    --color-sf-tab-border: var(--ws-border-muted);
    --color-sf-grid-border: var(--ws-border-base);
    /* ============================================================
       TABLE / GRID
       ============================================================ */
    --color-sf-table-bg-color-hover: var(--ws-table-bg-color-hover);
    --color-sf-table-bg-color-pressed: var(--ws-bg-muted);
    --color-sf-table-bg-color-selected: var(--ws-bg-muted);
    --color-sf-table-text-color-hover: var(--ws-text-base-hover);
    --color-sf-table-text-color-pressed: var(--ws-text-base-pressed);
    --color-sf-table-text-color-selected: var(--ws-text-selection);
    --color-sf-table-text-color-disabled: var(--ws-text-muted);
    /* ============================================================
       FLYOUT BG + TOOLTIP
       ============================================================ */
    --color-sf-flyout-bg-color: var(--ws-bg-base);
    --color-sf-flyout-bg-color-hover: var(--ws-bg-alt);
    --color-sf-tooltip-bg-color: rgba(0,0,0,.9);
    --color-sf-tooltip-text-color: #fff;
    /* ============================================================
       SEMANTIC COLORS — FULL STATE COVERAGE
       ============================================================ */
    /* Primary */
    --color-sf-primary: var(--ws-primary);
    --color-sf-primary-text-color: var(--ws-primary-text);
    --color-sf-primary-bg-color: var(--ws-primary);
    --color-sf-primary-border-color: var(--ws-border-primary);
    --color-sf-primary-bg-color-hover: var(--ws-primary-hover);
    --color-sf-primary-border-color-hover: var(--ws-border-primary);
    --color-sf-primary-bg-color-pressed: var(--ws-primary-pressed);
    --color-sf-primary-border-color-pressed: var(--ws-border-primary);
    --color-sf-primary-bg-color-focus: var(--ws-primary-focus);
    --color-sf-primary-border-color-focus: var(--ws-border-focus);
    --color-sf-primary-bg-color-disabled: var(--ws-primary-disabled);
    --color-sf-primary-border-color-disabled: var(--ws-border-disabled);
    /* Secondary */
    --color-sf-secondary: var(--ws-secondary);
    --color-sf-secondary-text: var(--ws-secondary-text);
    --color-sf-secondary-bg-color: var(--ws-secondary);
    --color-sf-secondary-border-color: var(--ws-border-secondary);
    --color-sf-secondary-bg-color-hover: var(--ws-secondary-hover);
    --color-sf-secondary-border-color-hover: var(--ws-border-secondary);
    --color-sf-secondary-bg-color-pressed: var(--ws-secondary-pressed);
    --color-sf-secondary-border-color-pressed: var(--ws-border-secondary);
    --color-sf-secondary-bg-color-focus: var(--ws-secondary-focus);
    --color-sf-secondary-border-color-focus: var(--ws-border-focus);
    --color-sf-secondary-bg-color-disabled: var(--ws-secondary-disabled);
    --color-sf-secondary-border-color-disabled: var(--ws-border-disabled);
    /* Success */
    --color-sf-success: var(--ws-success);
    --color-sf-success-text: var(--ws-success-text);
    --color-sf-success-bg-color: var(--ws-success);
    --color-sf-success-border-color: var(--ws-border-success);
    --color-sf-success-bg-color-hover: var(--ws-success-hover);
    --color-sf-success-border-color-hover: var(--ws-border-success);
    --color-sf-success-bg-color-pressed: var(--ws-success-pressed);
    --color-sf-success-border-color-pressed: var(--ws-border-success);
    --color-sf-success-bg-color-focus: var(--ws-success-focus);
    --color-sf-success-border-color-focus: var(--ws-border-focus);
    --color-sf-success-bg-color-disabled: var(--ws-success-disabled);
    --color-sf-success-border-color-disabled: var(--ws-border-disabled);
    /* Info */
    --color-sf-info: var(--ws-info);
    --color-sf-info-text: var(--ws-info-text);
    --color-sf-info-bg-color: var(--ws-info);
    --color-sf-info-border-color: var(--ws-border-info);
    --color-sf-info-bg-color-hover: var(--ws-info-hover);
    --color-sf-info-border-color-hover: var(--ws-border-info);
    --color-sf-info-bg-color-pressed: var(--ws-info-pressed);
    --color-sf-info-border-color-pressed: var(--ws-border-info);
    --color-sf-info-bg-color-focus: var(--ws-info-focus);
    --color-sf-info-border-color-focus: var(--ws-border-focus);
    --color-sf-info-bg-color-disabled: var(--ws-info-disabled);
    --color-sf-info-border-color-disabled: var(--ws-border-disabled);
    /* Warning */
    --color-sf-warning: var(--ws-warning);
    --color-sf-warning-text: var(--ws-warning-text);
    --color-sf-warning-bg-color: var(--ws-warning);
    --color-sf-warning-border-color: var(--ws-border-warning);
    --color-sf-warning-bg-color-hover: var(--ws-warning-hover);
    --color-sf-warning-border-color-hover: var(--ws-border-warning);
    --color-sf-warning-bg-color-pressed: var(--ws-warning-pressed);
    --color-sf-warning-border-color-pressed: var(--ws-border-warning);
    --color-sf-warning-bg-color-focus: var(--ws-warning-focus);
    --color-sf-warning-border-color-focus: var(--ws-border-focus);
    --color-sf-warning-bg-color-disabled: var(--ws-warning-disabled);
    --color-sf-warning-border-color-disabled: var(--ws-border-disabled);
    /* Danger */
    --color-sf-danger: var(--ws-danger);
    --color-sf-danger-text: var(--ws-danger-text);
    --color-sf-danger-bg-color: var(--ws-danger);
    --color-sf-danger-border-color: var(--ws-border-danger);
    --color-sf-danger-bg-color-hover: var(--ws-danger-hover);
    --color-sf-danger-border-color-hover: var(--ws-border-danger);
    --color-sf-danger-bg-color-pressed: var(--ws-danger-pressed);
    --color-sf-danger-border-color-pressed: var(--ws-border-danger);
    --color-sf-danger-bg-color-focus: var(--ws-danger-focus);
    --color-sf-danger-border-color-focus: var(--ws-border-focus);
    --color-sf-danger-bg-color-disabled: var(--ws-danger-disabled);
    --color-sf-danger-border-color-disabled: var(--ws-border-disabled);
    /* ============================================================
       FONTS
       ============================================================ */
    .e-control,
    .e-wrapper,
    .e-grid,
    .e-dropdownbase .e-list-item,
    .e-input,
    .e-textbox,
    .e-toolbar,
    .e-toolbar .e-tbar-btn,
    .e-badge,
    .e-richtexteditor .e-content {
        font-family: var(--ws-font-family) !important;
    }
}