/* Costix design tokens — canonical foundation and semantic contracts. */
@layer tokens {
  :root {
    --cx-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
    --cx-success: #168a4a;
    --cx-warning: #b7791f;
    --cx-danger: #b42318;
    --cx-info: #1d4ed8;
    --cx-radius-sm: .6rem;
    --cx-radius-md: .9rem;
    --cx-radius-lg: 1.25rem;
    --cx-radius-xl: 1.75rem;
    --cx-space-1: .25rem;
    --cx-space-2: .5rem;
    --cx-space-3: .75rem;
    --cx-space-4: 1rem;
    --cx-space-5: 1.25rem;
    --cx-space-6: 1.5rem;
    --cx-space-8: 2rem;
    --cx-window-width: 1040px;
    --cx-window-max-height: min(92vh, 940px);
    --cx-window-padding: clamp(16px, 1.8vw, 24px);
    --cx-window-gap: clamp(12px, 1.2vw, 18px);
    --cx-scroll-thumb: color-mix(in srgb, var(--cx-brand) 42%, var(--cx-border));
    --cx-scroll-thumb-hover: color-mix(in srgb, var(--cx-brand-strong) 64%, var(--cx-border));
    --cx-sidebar-width: 280px;
    --cx-topbar-height: 72px;
    --cx-transition: 160ms ease;
    --cx-control-height: 44px;
    --cx-toolbar-gap: .75rem;
    --cx-z-sticky: 40;
    --cx-z-dropdown: 300;
    --cx-z-popover: 500;
    --cx-z-backdrop: 1000;
    --cx-z-modal: 1100;
    --cx-z-drawer: 1200;
    --cx-z-toast: 1400;
    --cx-z-critical: 1600;
    --cx-viewport-block: 100dvh;
  }
}

/* Financial/operational semantic colors are intentionally independent from brand colors. */
@layer tokens {
  :root {
    --cx-sem-revenue: #2563eb;
    --cx-sem-revenue-soft: rgba(37, 99, 235, .12);
    --cx-sem-revenue-line: rgba(37, 99, 235, .28);
    --cx-sem-profit: #15803d;
    --cx-sem-profit-soft: rgba(21, 128, 61, .13);
    --cx-sem-profit-line: rgba(21, 128, 61, .30);
    --cx-sem-loss: #b42318;
    --cx-sem-loss-soft: rgba(180, 35, 24, .12);
    --cx-sem-loss-line: rgba(180, 35, 24, .30);
    --cx-sem-cost: #c2410c;
    --cx-sem-cost-soft: rgba(194, 65, 12, .13);
    --cx-sem-cost-line: rgba(194, 65, 12, .30);
    --cx-sem-expense: #7e22ce;
    --cx-sem-expense-soft: rgba(126, 34, 206, .12);
    --cx-sem-expense-line: rgba(126, 34, 206, .28);
    --cx-sem-inventory: #0f766e;
    --cx-sem-inventory-soft: rgba(15, 118, 110, .13);
    --cx-sem-inventory-line: rgba(15, 118, 110, .28);
    --cx-sem-production: #92400e;
    --cx-sem-production-soft: rgba(146, 64, 14, .13);
    --cx-sem-production-line: rgba(146, 64, 14, .28);
    --cx-sem-forecast: #0284c7;
    --cx-sem-forecast-soft: rgba(2, 132, 199, .12);
    --cx-sem-forecast-line: rgba(2, 132, 199, .28);
    --cx-sem-settlement: #1e3a8a;
    --cx-sem-settlement-soft: rgba(30, 58, 138, .12);
    --cx-sem-settlement-line: rgba(30, 58, 138, .28);
    --cx-sem-pending: #b7791f;
    --cx-sem-pending-soft: rgba(183, 121, 31, .14);
    --cx-sem-pending-line: rgba(183, 121, 31, .32);
    --cx-sem-neutral: #475569;
    --cx-sem-neutral-soft: rgba(71, 85, 105, .11);
    --cx-sem-neutral-line: rgba(71, 85, 105, .24);
  }
}

/* Phase 31C — Costix Brand Theme tokens: logo-based purple/violet/magenta identity */
@layer tokens {
  :root {
    color-scheme: light;
    --cx-brand-primary: #241066;
    --cx-brand-secondary: #5b1aa3;
    --cx-brand-accent: #d83bbe;
    --cx-brand-accent-2: #9b2bd9;
    --cx-brand-ink: #1f1452;
    --cx-brand-cream: #fbfaff;
    --cx-brand-gradient: linear-gradient(135deg, #241066 0%, #5b1aa3 58%, #d83bbe 100%);
    --cx-brand-gradient-soft: linear-gradient(135deg, rgba(36, 16, 102, .10), rgba(216, 59, 190, .075));
    --cx-logo-arc: linear-gradient(135deg, #ffffff 0 35%, #d83bbe 36% 70%, #5b1aa3 71% 100%);

    --cx-bg: #f7f4ff;
    --cx-bg-soft: #fcfbff;
    --cx-surface: #ffffff;
    --cx-surface-strong: #f1ecff;
    --cx-text: #18112f;
    --cx-ink: #18112f;
    --cx-muted: #706783;
    --cx-border: rgba(36, 16, 102, .13);
    --cx-brand: var(--cx-brand-primary);
    --cx-brand-strong: var(--cx-brand-secondary);
    --cx-brand-soft: rgba(91, 26, 163, .10);
    --cx-accent: var(--cx-brand-accent);
    --cx-focus: rgba(216, 59, 190, .28);
    --cx-glass: rgba(255, 255, 255, .86);
    --cx-glass-strong: rgba(255, 255, 255, .95);
    --cx-panel-bg: linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,244,255,.88));
    --cx-page-gradient-a: rgba(36, 16, 102, .12);
    --cx-page-gradient-b: rgba(216, 59, 190, .10);
    --cx-table-toolbar-bg: rgba(255,255,255,.82);
    --cx-control-bg: rgba(255,255,255,.98);
    --cx-control-border: rgba(91, 26, 163, .18);
    --cx-brand-text: #3a167f;
    --cx-shadow-card: 0 22px 58px rgba(36, 16, 102, .12);
    --cx-shadow-soft: 0 12px 28px rgba(36, 16, 102, .09);

    --cx-row-hover-bg: rgba(91, 26, 163, .075);
    --cx-row-hover-border: rgba(216, 59, 190, .34);
    --cx-row-selected-bg: rgba(91, 26, 163, .12);
    --cx-row-selected-border: rgba(216, 59, 190, .48);
  }

  [data-theme="dark"] {
    color-scheme: dark;
    --cx-bg: #0d0920;
    --cx-bg-soft: #130d2f;
    --cx-surface: #191238;
    --cx-surface-strong: #241657;
    --cx-text: #fbf8ff;
    --cx-ink: #ffffff;
    --cx-muted: #c9bfda;
    --cx-border: rgba(235, 224, 255, .16);
    --cx-brand: #8b5cf6;
    --cx-brand-strong: #d83bbe;
    --cx-brand-soft: rgba(139, 92, 246, .16);
    --cx-brand-text: #f0d2ff;
    --cx-focus: rgba(216, 59, 190, .42);
    --cx-glass: rgba(25, 18, 56, .86);
    --cx-glass-strong: rgba(20, 13, 47, .96);
    --cx-panel-bg: linear-gradient(135deg, rgba(25,18,56,.98), rgba(19,13,47,.94));
    --cx-page-gradient-a: rgba(139, 92, 246, .18);
    --cx-page-gradient-b: rgba(216, 59, 190, .13);
    --cx-table-toolbar-bg: rgba(20, 13, 47, .86);
    --cx-control-bg: rgba(25, 18, 56, .96);
    --cx-control-border: rgba(216, 59, 190, .22);
    --cx-shadow-card: 0 24px 65px rgba(0, 0, 0, .42);
    --cx-shadow-soft: 0 13px 30px rgba(0, 0, 0, .34);

    --cx-sem-revenue: #7dd3fc;
    --cx-sem-revenue-soft: rgba(125, 211, 252, .13);
    --cx-sem-revenue-line: rgba(125, 211, 252, .32);
    --cx-sem-profit: #86efac;
    --cx-sem-profit-soft: rgba(134, 239, 172, .12);
    --cx-sem-profit-line: rgba(134, 239, 172, .30);
    --cx-sem-loss: #fb7185;
    --cx-sem-loss-soft: rgba(251, 113, 133, .13);
    --cx-sem-loss-line: rgba(251, 113, 133, .34);
    --cx-sem-cost: #fdba74;
    --cx-sem-cost-soft: rgba(253, 186, 116, .13);
    --cx-sem-cost-line: rgba(253, 186, 116, .32);
    --cx-sem-expense: #e879f9;
    --cx-sem-expense-soft: rgba(232, 121, 249, .14);
    --cx-sem-expense-line: rgba(232, 121, 249, .34);
    --cx-sem-inventory: #a78bfa;
    --cx-sem-inventory-soft: rgba(167, 139, 250, .14);
    --cx-sem-inventory-line: rgba(167, 139, 250, .34);
    --cx-sem-forecast: #93c5fd;
    --cx-sem-forecast-soft: rgba(147, 197, 253, .13);
    --cx-sem-forecast-line: rgba(147, 197, 253, .32);
    --cx-sem-production: #f0abfc;
    --cx-sem-production-soft: rgba(240, 171, 252, .13);
    --cx-sem-production-line: rgba(240, 171, 252, .32);
    --cx-sem-pending: #fcd34d;
    --cx-sem-pending-soft: rgba(252, 211, 77, .14);
    --cx-sem-pending-line: rgba(252, 211, 77, .34);
    --cx-sem-settlement: #c4b5fd;
    --cx-sem-settlement-soft: rgba(196, 181, 253, .14);
    --cx-sem-settlement-line: rgba(196, 181, 253, .34);
    --cx-sem-neutral: #cbd5e1;
    --cx-sem-neutral-soft: rgba(203, 213, 225, .10);
    --cx-sem-neutral-line: rgba(203, 213, 225, .25);

    --cx-row-hover-bg: rgba(216, 59, 190, .11);
    --cx-row-hover-border: rgba(216, 59, 190, .42);
    --cx-row-selected-bg: rgba(139, 92, 246, .18);
    --cx-row-selected-border: rgba(216, 59, 190, .55);
  }
}

/* B-Design-1 — Foundation & Contracts: design-system token contract
   Owner: tokens.css is the single source of truth for allowed company-app UI styling.
   Scope: company/admin-operational pages only. Excludes Platform Admin, Marketing, POS, Call Center, Call Center Orders and Sales Log feature refactors. */
@layer tokens {
  :root {
    /* Canonical surface tokens */
    --cx-surface-page: var(--cx-bg);
    --cx-surface-page-soft: var(--cx-bg-soft);
    --cx-surface-card: var(--cx-surface);
    --cx-surface-panel: var(--cx-panel-bg);
    --cx-surface-raised: var(--cx-glass-strong);
    --cx-surface-muted: var(--cx-surface-strong);

    /* Canonical text tokens */
    --cx-text-main: var(--cx-text);
    --cx-text-strong: var(--cx-ink, var(--cx-text));
    --cx-text-soft: var(--cx-muted);
    --cx-text-inverse: #ffffff;

    /* Canonical border/focus tokens */
    --cx-border-soft: var(--cx-border);
    --cx-border-strong: color-mix(in srgb, var(--cx-brand) 30%, var(--cx-border));
    --cx-focus-ring: 0 0 0 3px var(--cx-focus);

    /* Component contract tokens */
    --cx-card-bg: var(--cx-panel-bg);
    --cx-card-bg-solid: var(--cx-surface-card);
    --cx-card-border: var(--cx-border-soft);
    --cx-card-radius: var(--cx-radius-xl);
    --cx-card-radius-compact: var(--cx-radius-lg);
    --cx-card-shadow: var(--cx-shadow-soft);
    --cx-card-shadow-hover: var(--cx-shadow-card);

    --cx-btn-bg: var(--cx-surface-card);
    --cx-btn-border: var(--cx-border-soft);
    --cx-btn-text: var(--cx-text-main);
    --cx-btn-radius: var(--cx-radius-md);
    --cx-btn-shadow-hover: var(--cx-shadow-soft);
    --cx-btn-primary-bg: var(--cx-brand-gradient, linear-gradient(135deg, var(--cx-brand), var(--cx-brand-strong)));
    --cx-btn-primary-text: #ffffff;

    --cx-table-bg: var(--cx-surface-card);
    --cx-table-head-bg: var(--cx-surface-muted);
    --cx-table-head-text: var(--cx-text-main);
    --cx-table-cell-border: var(--cx-border-soft);
    --cx-table-row-hover-bg: var(--cx-row-hover-bg);
    --cx-table-row-hover-border: var(--cx-row-hover-border);
    --cx-table-row-selected-bg: var(--cx-row-selected-bg);
    --cx-table-row-selected-border: var(--cx-row-selected-border);
    --cx-table-radius: var(--cx-radius-lg);

    --cx-modal-bg: var(--cx-surface-card);
    --cx-modal-header-bg: var(--cx-glass-strong);
    --cx-modal-footer-bg: var(--cx-glass-strong);
    --cx-modal-border: var(--cx-border-soft);
    --cx-modal-radius: var(--cx-radius-xl);
    --cx-modal-shadow: var(--cx-shadow-card);

    --cx-field-bg: var(--cx-control-bg);
    --cx-field-border: var(--cx-control-border);
    --cx-field-text: var(--cx-text-main);
    --cx-field-radius: var(--cx-radius-md);

    --cx-state-bg: var(--cx-brand-soft);
    --cx-state-border: var(--cx-border-soft);
    --cx-state-text: var(--cx-text-soft);

    /* Motion contract: components consume these aliases, feature CSS should not invent durations. */
    --cx-motion-fast: 120ms;
    --cx-motion-base: var(--cx-transition);
    --cx-motion-slow: 240ms;
    --cx-motion-ease: ease;
    --cx-motion-lift-y: -2px;
  }

  [data-theme="dark"] {
    --cx-text-inverse: #ffffff;
    --cx-border-strong: color-mix(in srgb, var(--cx-brand-strong) 35%, var(--cx-border));
    --cx-btn-primary-text: #ffffff;
  }
}


/* B-Design-2 — Windows, Tables & Cards Unification tokens.
   Purpose: keep visual unification adjustable later from one place via tokens/variants,
   while preserving page-level behavior and allowing safe page hooks in later phases. */
@layer tokens {
  :root {
    --cx-card-header-bg: color-mix(in srgb, var(--cx-surface-card) 84%, var(--cx-brand-soft));
    --cx-card-header-border: color-mix(in srgb, var(--cx-brand) 14%, var(--cx-border-soft));
    --cx-card-header-padding: var(--cx-space-5);
    --cx-card-body-padding: var(--cx-space-5);
    --cx-card-footer-padding: var(--cx-space-4) var(--cx-space-5);
    --cx-card-body-gap: var(--cx-space-4);
    --cx-card-metric-min-height: 136px;
    --cx-card-interactive-outline: color-mix(in srgb, var(--cx-brand) 46%, var(--cx-border-soft));

    --cx-window-backdrop: rgba(16, 17, 34, .50);
    --cx-window-header-padding: var(--cx-space-5);
    --cx-window-body-padding: var(--cx-space-5);
    --cx-window-footer-padding: var(--cx-space-4) var(--cx-space-5);
    --cx-window-title-size: clamp(1.08rem, 2vw, 1.34rem);
    --cx-window-subtitle-size: .94rem;
    --cx-window-meta-gap: .55rem;
    --cx-window-summary-bg: color-mix(in srgb, var(--cx-brand-soft) 42%, var(--cx-surface-card));
    --cx-window-summary-border: color-mix(in srgb, var(--cx-brand) 16%, var(--cx-border-soft));
    --cx-window-badge-bg: color-mix(in srgb, var(--cx-brand-soft) 54%, var(--cx-surface-card));
    --cx-window-badge-text: var(--cx-brand-text);

    --cx-table-wrap-border: color-mix(in srgb, var(--cx-brand) 12%, var(--cx-border-soft));
    --cx-table-wrap-shadow: 0 18px 42px rgba(44, 31, 74, .08);
    --cx-table-caption-bg: color-mix(in srgb, var(--cx-brand-soft) 36%, var(--cx-surface-card));
    --cx-table-caption-text: var(--cx-text-main);
    --cx-table-head-shadow: inset 0 -1px 0 color-mix(in srgb, var(--cx-brand) 16%, var(--cx-border-soft));
    --cx-table-cell-padding-y: .82rem;
    --cx-table-cell-padding-x: .9rem;
    --cx-table-cell-padding-y-dense: .62rem;
    --cx-table-cell-padding-x-dense: .72rem;
    --cx-table-detail-row-bg: color-mix(in srgb, var(--cx-brand-soft) 26%, var(--cx-surface-card));
    --cx-table-detail-border: color-mix(in srgb, var(--cx-brand) 16%, var(--cx-border-soft));
  }

  [data-theme="dark"] {
    --cx-window-backdrop: rgba(4, 5, 18, .74);
    --cx-card-header-bg: color-mix(in srgb, var(--cx-surface-card) 76%, var(--cx-brand-soft));
    --cx-window-summary-bg: color-mix(in srgb, var(--cx-brand-soft) 26%, var(--cx-surface-strong));
    --cx-window-summary-border: color-mix(in srgb, var(--cx-brand-strong) 18%, var(--cx-border-soft));
    --cx-window-badge-bg: color-mix(in srgb, var(--cx-brand-soft) 34%, var(--cx-surface-strong));
    --cx-table-wrap-shadow: 0 18px 48px rgba(0, 0, 0, .26);
    --cx-table-caption-bg: color-mix(in srgb, var(--cx-brand-soft) 24%, var(--cx-surface-strong));
    --cx-table-detail-row-bg: color-mix(in srgb, var(--cx-brand-soft) 18%, var(--cx-surface-strong));
  }
}


/* B-Design Table Fix — Enterprise table readability/performance contract.
   Purpose: readable modern tables with safe scroll/pagination-friendly layout.
   Does not animate rows and does not alter data/API behavior. */
@layer tokens {
  :root {
    --cx-enterprise-table-wrap-bg: var(--cx-surface-card);
    --cx-enterprise-table-wrap-border: color-mix(in srgb, var(--cx-brand) 12%, var(--cx-border-soft));
    --cx-enterprise-table-wrap-shadow: 0 18px 42px rgba(44, 31, 74, .075);
    --cx-enterprise-table-head-bg: color-mix(in srgb, var(--cx-surface-muted) 84%, var(--cx-brand-soft));
    --cx-enterprise-table-head-text: var(--cx-text-main);
    --cx-enterprise-table-row-bg: var(--cx-surface-card);
    --cx-enterprise-table-row-alt-bg: color-mix(in srgb, var(--cx-surface-page-soft) 78%, var(--cx-surface-card));
    --cx-enterprise-table-row-hover-bg: color-mix(in srgb, var(--cx-brand-soft) 32%, var(--cx-surface-card));
    --cx-enterprise-table-border: color-mix(in srgb, var(--cx-brand) 10%, var(--cx-border-soft));
    --cx-enterprise-table-cell-y: .92rem;
    --cx-enterprise-table-cell-x: 1rem;
    --cx-enterprise-table-row-height: 56px;
    --cx-enterprise-table-head-height: 52px;
    --cx-enterprise-table-font-size: .94rem;
    --cx-enterprise-table-radius: var(--cx-radius-xl);
    --cx-enterprise-table-max-height: min(64vh, 680px);
    --cx-enterprise-table-min-width: 1040px;
    --cx-enterprise-table-ledger-min-width: 1120px;
    --cx-enterprise-table-movement-min-width: 1240px;
    --cx-enterprise-table-caption-bg: color-mix(in srgb, var(--cx-brand-soft) 34%, var(--cx-surface-card));
  }

  [data-theme="dark"] {
    --cx-enterprise-table-wrap-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    --cx-enterprise-table-head-bg: color-mix(in srgb, var(--cx-surface-strong) 86%, var(--cx-brand-soft));
    --cx-enterprise-table-row-alt-bg: color-mix(in srgb, var(--cx-surface-strong) 46%, var(--cx-surface-card));
    --cx-enterprise-table-row-hover-bg: color-mix(in srgb, var(--cx-brand-soft) 22%, var(--cx-surface-strong));
    --cx-enterprise-table-caption-bg: color-mix(in srgb, var(--cx-brand-soft) 22%, var(--cx-surface-strong));
  }
}

/* Costix Backoffice UI Refresh — route-scoped visual tokens.
   Activated by app-shell.js for all backoffice routes except protected POS/Call Center/Sales Log flows. */
@layer tokens {
  html[data-ui-skin="backoffice"] {
    --cx-bg: #f7f7fb;
    --cx-bg-soft: #fbfaff;
    --cx-surface: #ffffff;
    --cx-surface-strong: #f1eff7;
    --cx-text: #17151d;
    --cx-ink: #17151d;
    --cx-muted: #62606a;
    --cx-border: #e5e5ea;

    --cx-brand-primary: #230e6d;
    --cx-brand-secondary: #6d1e9c;
    --cx-brand-accent: #cd46b6;
    --cx-brand-accent-2: #9f36b3;
    --cx-brand-ink: #230e6d;
    --cx-brand: var(--cx-brand-primary);
    --cx-brand-strong: var(--cx-brand-secondary);
    --cx-brand-soft: #f1eafb;
    --cx-brand-text: #411885;
    --cx-brand-gradient: linear-gradient(135deg, #230e6d 0%, #6d1e9c 62%, #cd46b6 100%);
    --cx-brand-gradient-soft: linear-gradient(135deg, rgba(35,14,109,.09), rgba(205,70,182,.06));

    --cx-radius-sm: .625rem;
    --cx-radius-md: .875rem;
    --cx-radius-lg: 1.125rem;
    --cx-radius-xl: 1.5rem;
    --cx-shadow-card: 0 18px 55px rgba(23,21,29,.12);
    --cx-shadow-soft: 0 8px 22px rgba(23,21,29,.035);

    --cx-glass: rgba(255,255,255,.84);
    --cx-glass-strong: rgba(255,255,255,.96);
    --cx-panel-bg: #ffffff;
    --cx-page-gradient-a: rgba(35, 14, 109, .07);
    --cx-page-gradient-b: rgba(205, 70, 182, .045);
    --cx-table-toolbar-bg: #fbfaff;
    --cx-control-bg: #ffffff;
    --cx-control-border: #d7d6dc;
    --cx-focus: rgba(109, 30, 156, .32);
    --cx-control-height: 44px;

    --cx-surface-page: var(--cx-bg);
    --cx-surface-page-soft: var(--cx-bg-soft);
    --cx-surface-card: #ffffff;
    --cx-surface-panel: #ffffff;
    --cx-surface-raised: #ffffff;
    --cx-surface-muted: #f1eff7;
    --cx-text-main: var(--cx-text);
    --cx-text-strong: #17151d;
    --cx-text-soft: var(--cx-muted);
    --cx-border-soft: var(--cx-border);
    --cx-border-strong: #d7d6dc;

    --cx-card-bg: #ffffff;
    --cx-card-bg-solid: #ffffff;
    --cx-card-border: #e5e5ea;
    --cx-card-radius: 18px;
    --cx-card-radius-compact: 14px;
    --cx-card-shadow: 0 1px 2px rgba(23,21,29,.04), 0 8px 22px rgba(23,21,29,.035);
    --cx-card-shadow-hover: 0 14px 30px rgba(23,21,29,.09);
    --cx-card-header-bg: #ffffff;
    --cx-card-header-border: rgba(59, 38, 83, .075);
    --cx-card-header-padding: .72rem .9rem;
    --cx-card-body-padding: .82rem .9rem;
    --cx-card-footer-padding: .7rem .9rem;
    --cx-card-body-gap: .72rem;
    --cx-card-metric-min-height: 84px;

    --cx-btn-bg: #ffffff;
    --cx-btn-border: rgba(70, 42, 98, .13);
    --cx-btn-text: #342743;
    --cx-btn-radius: 10px;
    --cx-btn-shadow-hover: 0 8px 18px rgba(61, 36, 88, .09);
    --cx-btn-primary-bg: #6d1e9c;
    --cx-btn-primary-text: #ffffff;

    --cx-field-bg: #ffffff;
    --cx-field-border: rgba(76, 43, 105, .14);
    --cx-field-text: #2a2236;
    --cx-field-radius: 10px;

    --cx-table-bg: #ffffff;
    --cx-table-head-bg: #f7f4f9;
    --cx-table-head-text: #4b3b5d;
    --cx-table-cell-border: rgba(70, 47, 91, .075);
    --cx-table-row-hover-bg: #faf6fd;
    --cx-table-row-hover-border: rgba(132, 79, 174, .20);
    --cx-table-row-selected-bg: #f4eafc;
    --cx-table-row-selected-border: rgba(132, 79, 174, .32);
    --cx-table-radius: 16px;
    --cx-table-wrap-border: rgba(65, 43, 86, .09);
    --cx-table-wrap-shadow: 0 10px 28px rgba(51, 34, 70, .055);
    --cx-table-caption-bg: #faf8fc;
    --cx-table-caption-text: #342743;
    --cx-table-head-shadow: inset 0 -1px 0 rgba(70, 47, 91, .08);
    --cx-table-detail-row-bg: #faf8fc;
    --cx-table-detail-border: rgba(70, 47, 91, .09);

    --cx-enterprise-table-wrap-bg: #ffffff;
    --cx-enterprise-table-wrap-border: rgba(65, 43, 86, .09);
    --cx-enterprise-table-wrap-shadow: 0 10px 28px rgba(51, 34, 70, .055);
    --cx-enterprise-table-head-bg: linear-gradient(180deg, #f8f5fb 0%, #f3eef8 100%);
    --cx-enterprise-table-head-text: #4b3b5d;
    --cx-enterprise-table-row-bg: #ffffff;
    --cx-enterprise-table-row-alt-bg: #fdfcfe;
    --cx-enterprise-table-row-hover-bg: #faf6fd;
    --cx-enterprise-table-border: rgba(70, 47, 91, .075);
    --cx-enterprise-table-cell-y: .76rem;
    --cx-enterprise-table-cell-x: .88rem;
    --cx-enterprise-table-row-height: 50px;
    --cx-enterprise-table-head-height: 48px;
    --cx-enterprise-table-font-size: .9rem;
    --cx-enterprise-table-radius: 16px;
    --cx-enterprise-table-caption-bg: #faf8fc;

    --cx-window-summary-bg: #faf7fc;
    --cx-window-summary-border: rgba(76, 43, 105, .10);
    --cx-window-badge-bg: #f3ebfa;
    --cx-window-badge-text: #5e2d8d;
    --cx-state-bg: #f8f4fb;
    --cx-state-border: rgba(76, 43, 105, .12);
    --cx-state-text: #70627e;

    --cx-row-hover-bg: #faf6fd;
    --cx-row-hover-border: rgba(132, 79, 174, .20);
    --cx-row-selected-bg: #f4eafc;
    --cx-row-selected-border: rgba(132, 79, 174, .32);
  }

  html[data-ui-skin="backoffice"][data-theme="dark"] {
    --cx-brand-text: #dfb8f7;
    --cx-text-strong: #f6f1fb;
    --cx-surface-panel: #1b1427;
    --cx-surface-raised: #241a33;
    --cx-table-row-selected-bg: #392247;
    --cx-table-caption-text: #e9ddf2;
    --cx-table-detail-row-bg: #21172f;
    --cx-bg: #100b19;
    --cx-bg-soft: #15101f;
    --cx-surface: #1b1427;
    --cx-surface-strong: #241a33;
    --cx-text: #f6f1fb;
    --cx-ink: #ffffff;
    --cx-muted: #b8aec4;
    --cx-border: rgba(235, 220, 247, .12);
    --cx-brand: #a879d1;
    --cx-brand-strong: #c18ae8;
    --cx-brand-soft: rgba(168, 121, 209, .13);
    --cx-control-bg: #1c1528;
    --cx-control-border: rgba(208, 177, 235, .16);
    --cx-panel-bg: #1b1427;
    --cx-surface-card: #1b1427;
    --cx-surface-muted: #241a33;
    --cx-card-bg: #1b1427;
    --cx-card-bg-solid: #1b1427;
    --cx-card-border: rgba(235, 220, 247, .10);
    --cx-card-header-bg: linear-gradient(180deg, #1d1629, #1a1325);
    --cx-card-header-border: rgba(235, 220, 247, .08);
    --cx-btn-bg: #21182e;
    --cx-btn-border: rgba(235, 220, 247, .12);
    --cx-btn-text: #f2ebf8;
    --cx-field-bg: #191222;
    --cx-field-border: rgba(235, 220, 247, .14);
    --cx-field-text: #f5f0f8;
    --cx-table-bg: #1b1427;
    --cx-table-head-bg: linear-gradient(180deg, #251a34, #21172f);
    --cx-table-head-text: #e9ddf2;
    --cx-table-cell-border: rgba(235, 220, 247, .07);
    --cx-table-wrap-border: rgba(235, 220, 247, .10);
    --cx-table-caption-bg: #21172f;
    --cx-table-row-hover-bg: #281b37;
    --cx-enterprise-table-wrap-bg: #1b1427;
    --cx-enterprise-table-wrap-border: rgba(235, 220, 247, .10);
    --cx-enterprise-table-head-bg: linear-gradient(180deg, #251a34, #21172f);
    --cx-enterprise-table-head-text: #e9ddf2;
    --cx-enterprise-table-row-bg: #1b1427;
    --cx-enterprise-table-row-alt-bg: #1e162a;
    --cx-enterprise-table-row-hover-bg: #281b37;
    --cx-enterprise-table-border: rgba(235, 220, 247, .07);
  }
}