/* ==========================================================================
   CommerceFlow Independent Identity — 2026
   Violet, plum and aqua visual system.
   Loaded last across public, tenant and platform interfaces.
   ========================================================================== */

:root {
  --commerce-ink: #2b2147;
  --commerce-ink-2: #3a2d63;
  --commerce-primary: #6547d7;
  --commerce-primary-strong: #5032bd;
  --commerce-primary-soft: #f0edff;
  --commerce-accent: #20a89e;
  --commerce-accent-strong: #147b74;
  --commerce-accent-soft: #e3f7f4;
  --commerce-coral: #df6c73;
  --commerce-success: #27835d;
  --commerce-warning: #b86d28;
  --commerce-danger: #b64752;
  --commerce-canvas: #f7f6fa;
  --commerce-surface: #ffffff;
  --commerce-soft: #f2f0f7;
  --commerce-line: #ddd9e8;
  --commerce-muted: #706a80;
  --commerce-shadow: 0 1px 2px rgba(43,33,71,.04),
                     0 12px 32px rgba(43,33,71,.07);
}

/*
 * Remap legacy variable names so older components inherit the new identity
 * without modifying business logic or historic component files.
 */
body.cf-v8 {
  --brand-primary: var(--commerce-primary);
  --brand-accent: var(--commerce-accent);

  --primary: var(--commerce-primary);
  --accent: var(--commerce-accent);
  --sidebar: var(--commerce-ink);

  --bf-ink: var(--commerce-ink);
  --bf-ink2: var(--commerce-ink-2);
  --bf-blue: var(--commerce-primary);
  --bf-sky: #a99cf0;
  --bf-gold: var(--commerce-accent);
  --bf-gold-soft: #bde7e2;
  --bf-warm: #f2f0f7;
  --bf-warm2: #e8e4f0;
  --bf-cloud: #f1eff6;
  --bf-line: var(--commerce-line);

  --cf-ink: var(--commerce-ink);
  --cf-ink-2: var(--commerce-ink-2);
  --cf-blue: var(--commerce-primary);
  --cf-sky: #a99cf0;
  --cf-gold: var(--commerce-accent);
  --cf-warm: #f2f0f7;
  --cf-canvas: var(--commerce-canvas);
  --cf-line: var(--commerce-line);
  --cf-text-muted: var(--commerce-muted);

  --x-navy: var(--commerce-ink);
  --x-navy-2: var(--commerce-ink-2);
  --x-gold: var(--commerce-accent);

  --cf-ui-navy: var(--commerce-ink);
  --cf-ui-navy-2: var(--commerce-ink-2);
  --cf-ui-blue: var(--commerce-primary);
  --cf-ui-gold: var(--commerce-accent);
  --cf-ui-bg: var(--commerce-canvas);
  --cf-ui-soft: var(--commerce-soft);
  --cf-ui-line: var(--commerce-line);
  --cf-ui-muted: var(--commerce-muted);

  --cf-erp-navy: var(--commerce-ink);
  --cf-erp-navy-2: var(--commerce-ink-2);
  --cf-erp-blue: var(--commerce-primary);
  --cf-erp-blue-soft: var(--commerce-primary-soft);
  --cf-erp-gold: var(--commerce-accent);
  --cf-erp-green: var(--commerce-success);
  --cf-erp-red: var(--commerce-danger);
  --cf-erp-amber: var(--commerce-warning);
  --cf-erp-line: var(--commerce-line);
  --cf-erp-soft: var(--commerce-soft);
  --cf-erp-muted: var(--commerce-muted);
}

/* ==========================================================================
   Shared controls
   ========================================================================== */

body.cf-v8 a {
  accent-color: var(--commerce-primary);
}

body.cf-v8 input,
body.cf-v8 select,
body.cf-v8 textarea {
  accent-color: var(--commerce-primary);
}

body.cf-v8 input:focus,
body.cf-v8 select:focus,
body.cf-v8 textarea:focus {
  border-color: var(--commerce-primary) !important;
  outline-color: rgba(101,71,215,.16) !important;
}

body.cf-v8 button:not(.ghost):not(.quiet-button):not(.icon-button),
body.cf-v8 .button:not(.ghost):not(.quiet-button):not(.icon-button) {
  border-color: var(--commerce-primary);
  background: var(--commerce-primary);
  color: #fff;
}

body.cf-v8 button:not(.ghost):not(.quiet-button):not(.icon-button):hover,
body.cf-v8 .button:not(.ghost):not(.quiet-button):not(.icon-button):hover {
  border-color: var(--commerce-primary-strong);
  background: var(--commerce-primary-strong);
}

body.cf-v8 .button.ghost,
body.cf-v8 button.ghost {
  border-color: #c9c2dc;
  background: #fff;
  color: var(--commerce-ink-2);
}

body.cf-v8 .badge.info,
body.cf-v8 .status-pill.info {
  background: var(--commerce-primary-soft);
  color: var(--commerce-primary-strong);
}

body.cf-v8 .badge.success,
body.cf-v8 .status-active {
  background: #e7f5ee;
  color: var(--commerce-success);
}

body.cf-v8 .badge.warning,
body.cf-v8 .status-suspended {
  background: #fff0e5;
  color: var(--commerce-warning);
}

body.cf-v8 .badge.accent {
  background: var(--commerce-accent-soft);
  color: var(--commerce-accent-strong);
}

/* ==========================================================================
   Public website
   ========================================================================== */

body.cf-v8.cf-public {
  background: var(--commerce-canvas);
  color: var(--commerce-ink);
}

body.cf-v8.cf-public .public-header {
  border-bottom-color: var(--commerce-line);
  background: rgba(255,255,255,.97);
}

body.cf-v8.cf-public .public-brand {
  color: var(--commerce-ink);
}

body.cf-v8.cf-public .public-brand-mark {
  border: 0;
  background: var(--commerce-primary);
  color: #fff;
}

body.cf-v8.cf-public .public-nav a:hover,
body.cf-v8.cf-public .public-text-link:hover {
  color: var(--commerce-primary);
}

body.cf-v8.cf-public .public-header-cta,
body.cf-v8.cf-public .saas-primary-cta,
body.cf-v8.cf-public .lp-submit {
  border-color: var(--commerce-primary);
  background: var(--commerce-primary);
  color: #fff;
}

body.cf-v8.cf-public .lp-hero {
  border-bottom-color: var(--commerce-accent);
  background:
    radial-gradient(circle at 85% 18%, rgba(124,97,230,.30), transparent 35%),
    linear-gradient(135deg, var(--commerce-ink) 0%, var(--commerce-ink-2) 62%, #503c83 100%);
}

body.cf-v8.cf-public .lp-window-bar {
  background: #241b3d;
}

body.cf-v8.cf-public .lp-preview-nav {
  background: var(--commerce-ink-2);
}

body.cf-v8.cf-public .lp-preview-nav strong {
  background: var(--commerce-accent);
  color: #123f3b;
}

body.cf-v8.cf-public .lp-preview-nav span.active {
  border-left-color: #b7a9ff;
  background: rgba(183,169,255,.17);
}

body.cf-v8.cf-public .lp-preview-command {
  background: var(--commerce-primary);
}

body.cf-v8.cf-public .lp-feature svg,
body.cf-v8.cf-public .lp-news-item > span {
  stroke: var(--commerce-primary);
  color: var(--commerce-primary);
}

body.cf-v8.cf-public .lp-workflow-step > span,
body.cf-v8.cf-public .lp-access-grid article > span {
  color: var(--commerce-accent-strong);
}

body.cf-v8.cf-public .lp-contact,
body.cf-v8.cf-public .lp-fit-strip {
  background: #f1eef8 !important;
}

body.cf-v8.cf-public .lp-request-form {
  border-color: #d5cfe3;
  box-shadow: var(--commerce-shadow);
}

body.cf-v8.cf-public .public-footer {
  border-top-color: var(--commerce-line);
  background: #eeeaf5;
}

/* ==========================================================================
   Tenant workspace and authentication
   ========================================================================== */

body.enterprise-ui.cf-workspace {
  --tenant-ink: var(--commerce-ink);
  --tenant-blue: var(--commerce-primary);
  --tenant-soft: var(--commerce-soft);
  --tenant-line: var(--commerce-line);
  --tenant-line-soft: #ebe8f1;
  --tenant-muted: var(--commerce-muted);

  background: var(--commerce-canvas);
  color: var(--commerce-ink);
}

body.enterprise-ui.cf-workspace .sidebar {
  background:
    linear-gradient(180deg, var(--commerce-ink) 0%, #352758 100%) !important;
}

body.enterprise-ui.cf-workspace .brand-mark {
  border: 0 !important;
  background: var(--commerce-accent) !important;
  color: #123f3b !important;
}

body.enterprise-ui.cf-workspace .nav-link.active,
body.enterprise-ui.cf-workspace .nav-link[aria-current="page"] {
  border-left-color: #b7a9ff !important;
  background: rgba(183,169,255,.16) !important;
  color: #fff !important;
}

body.enterprise-ui.cf-workspace .nav-link:hover {
  background: rgba(255,255,255,.07) !important;
}

body.enterprise-ui.cf-workspace .topbar,
body.enterprise-ui.cf-workspace .mobile-topbar {
  border-bottom-color: var(--commerce-line);
  background: rgba(255,255,255,.98);
}

body.enterprise-ui.cf-workspace .card,
body.enterprise-ui.cf-workspace .r73-data-panel,
body.enterprise-ui.cf-workspace .r73-edit-panel,
body.enterprise-ui.cf-workspace .r73-form-panel {
  border-color: var(--commerce-line);
  box-shadow: var(--commerce-shadow);
}

body.enterprise-ui.cf-workspace .r73-page-header h1,
body.enterprise-ui.cf-workspace .r73-panel-header strong,
body.enterprise-ui.cf-workspace h1,
body.enterprise-ui.cf-workspace h2,
body.enterprise-ui.cf-workspace h3 {
  color: var(--commerce-ink);
}

body.enterprise-ui.cf-workspace .r73-kicker,
body.enterprise-ui.cf-workspace .section-kicker,
body.enterprise-ui.cf-workspace .eyebrow {
  color: var(--commerce-primary);
}

body.enterprise-ui.cf-workspace .r73-filter-actions .button:not(.ghost),
body.enterprise-ui.cf-workspace .r73-page-header > .button {
  border-color: var(--commerce-primary);
  background: var(--commerce-primary);
}

body.enterprise-ui.cf-workspace .r73-status.shipped,
body.enterprise-ui.cf-workspace .r73-status.out_for_delivery {
  border-color: #b9adee;
  background: var(--commerce-primary-soft);
  color: var(--commerce-primary-strong);
}

body.enterprise-ui.cf-workspace .r73-action.refund {
  border-color: #e4a6a9;
  background: #fff0f1;
  color: #99434a;
}

body.enterprise-ui.cf-workspace .executive-kpi::before {
  background: var(--commerce-primary);
}

body.enterprise-ui.cf-workspace .executive-kpi.warning-card::before {
  background: var(--commerce-accent);
}

body.enterprise-ui.cf-workspace .chart-revenue-line {
  stroke: var(--commerce-primary);
}

body.enterprise-ui.cf-workspace .chart-profit-line {
  stroke: var(--commerce-accent);
}

body.enterprise-ui.cf-workspace .chart-point-revenue {
  stroke: var(--commerce-primary);
}

body.enterprise-ui.cf-workspace .chart-point-profit {
  stroke: var(--commerce-accent);
}

/* Operational register actions */
body.enterprise-ui.cf-workspace
.cf-register-actions .cf-row-action.primary {
  border-color: #a99aeb !important;
  background: var(--commerce-primary-soft) !important;
  color: var(--commerce-primary-strong) !important;
}

body.enterprise-ui.cf-workspace
.cf-register-actions .cf-row-action.primary:hover {
  border-color: #8773df !important;
  background: #e5dfff !important;
  color: #442cae !important;
}

body.enterprise-ui.cf-workspace
.cf-register-actions .cf-row-action.payment {
  border-color: #77c9c1 !important;
  background: var(--commerce-accent-soft) !important;
  color: var(--commerce-accent-strong) !important;
}

body.enterprise-ui.cf-workspace
.cf-register-actions .cf-row-action.payment:hover {
  border-color: #42aea4 !important;
  background: #d4f1ed !important;
}

body.enterprise-ui.cf-workspace
.cf-register-actions .cf-row-action.menu {
  border-color: #cdc7da !important;
  background: #fff !important;
  color: #5d566d !important;
}

body.enterprise-ui.cf-workspace
.cf-register-actions .cf-row-action > b {
  background: rgba(101,71,215,.13) !important;
  color: var(--commerce-primary-strong) !important;
}

/* Workspace login */
body.enterprise-ui.cf-workspace .workspace-login-brand {
  background:
    radial-gradient(circle at 78% 15%, rgba(124,97,230,.35), transparent 32%),
    linear-gradient(145deg, var(--commerce-ink), var(--commerce-ink-2));
}

body.enterprise-ui.cf-workspace .workspace-wordmark-mark {
  border-color: rgba(32,168,158,.65);
  background: rgba(32,168,158,.15);
  color: #7ce0d7;
}

body.enterprise-ui.cf-workspace .workspace-login-submit {
  background: var(--commerce-primary);
}

body.enterprise-ui.cf-workspace .workspace-login-submit:hover {
  background: var(--commerce-primary-strong);
}

/* ==========================================================================
   Platform administration and platform login
   ========================================================================== */

body.cf-v8.cf-platform {
  background: var(--commerce-canvas);
  color: var(--commerce-ink);
}

body.cf-v8.cf-platform .platform-sidebar {
  border-right-color: #4a3b70;
  background:
    linear-gradient(180deg, var(--commerce-ink) 0%, #352758 100%);
}

body.cf-v8.cf-platform .platform-sidebar-brand {
  border-bottom-color: rgba(255,255,255,.13);
  background: rgba(22,15,40,.30);
}

body.cf-v8.cf-platform .platform-sidebar-brand > span {
  background: var(--commerce-accent);
  color: #123f3b;
}

body.cf-v8.cf-platform .platform-nav a.active {
  border-left-color: #b7a9ff;
  background: rgba(183,169,255,.17);
  color: #fff;
}

body.cf-v8.cf-platform .platform-nav a:hover {
  background: rgba(255,255,255,.07);
}

body.cf-v8.cf-platform .platform-sidebar-footer {
  background: rgba(22,15,40,.42);
}

body.cf-v8.cf-platform .platform-topbar {
  border-bottom-color: var(--commerce-line);
  background: rgba(255,255,255,.98);
}

body.cf-v8.cf-platform .platform-context strong,
body.cf-v8.cf-platform .platform-heading h1 {
  color: var(--commerce-ink);
}

body.cf-v8.cf-platform .platform-page .card,
body.cf-v8.cf-platform .tenant-admin-card {
  border-color: var(--commerce-line);
  box-shadow: var(--commerce-shadow);
}

body.cf-v8.cf-platform .tenant-avatar {
  background: var(--commerce-primary-soft);
  color: var(--commerce-primary-strong);
}

body.cf-v8.cf-platform .platform-auth-page {
  background:
    radial-gradient(circle at 15% 10%, #e8e2ff 0, transparent 38%),
    var(--commerce-canvas);
}

body.cf-v8.cf-platform .platform-login-card {
  border-color: var(--commerce-line);
  box-shadow: 0 24px 70px rgba(43,33,71,.14);
}

body.cf-v8.cf-platform .platform-login-brand > span {
  background: var(--commerce-primary);
  color: #fff;
}

body.cf-v8.cf-platform .security-note {
  background: var(--commerce-accent-soft);
  color: #285e5a;
}

body.cf-v8.cf-platform .platform-mobile-overlay {
  background: rgba(43,33,71,.50);
}

/* Mobile navigation */
@media (max-width: 720px) {
  body.enterprise-ui.cf-workspace .mobile-bottom-nav a.active {
    color: var(--commerce-primary);
  }

  body.enterprise-ui.cf-workspace .mobile-bottom-nav a.active::before {
    background: var(--commerce-primary);
  }
}


/* CommerceFlow Independent Identity — white contrast correction */

/* Workspace login dark hero */
body.enterprise-ui.cf-workspace .workspace-login-brand .workspace-wordmark strong,
body.enterprise-ui.cf-workspace .workspace-login-brand .workspace-login-message h1 {
  color: #ffffff !important;
}

body.enterprise-ui.cf-workspace .workspace-login-brand .workspace-wordmark small,
body.enterprise-ui.cf-workspace .workspace-login-brand .workspace-login-message p,
body.enterprise-ui.cf-workspace .workspace-login-brand .login-back-link {
  color: rgba(255,255,255,.82) !important;
}

body.enterprise-ui.cf-workspace .workspace-login-brand .saas-kicker {
  color: #7ce0d7 !important;
}

/* Public hero dark surface */
body.cf-v8.cf-public .lp-hero .eyebrow,
body.cf-v8.cf-public .lp-hero .saas-kicker,
body.cf-v8.cf-public .lp-hero .lp-kicker {
  color: #7ce0d7 !important;
}

body.cf-v8.cf-public .lp-hero h1 {
  color: #ffffff !important;
}

body.cf-v8.cf-public .lp-hero p,
body.cf-v8.cf-public .lp-hero-proof span,
body.cf-v8.cf-public .lp-window-bar,
body.cf-v8.cf-public .lp-preview-nav {
  color: rgba(255,255,255,.82) !important;
}


/* CommerceFlow Independent Identity — public footer contrast */

body.cf-v8.cf-public .public-footer {
  border-top: 1px solid var(--commerce-line) !important;
  background: #ffffff !important;
  color: var(--commerce-muted) !important;
}

body.cf-v8.cf-public .public-footer-brand strong {
  color: var(--commerce-ink) !important;
}

body.cf-v8.cf-public .public-footer-brand span,
body.cf-v8.cf-public .public-footer p {
  color: #706a80 !important;
}

body.cf-v8.cf-public .public-footer-links a {
  color: #51476b !important;
  font-weight: 650 !important;
}

body.cf-v8.cf-public .public-footer-links a:hover {
  color: var(--commerce-primary) !important;
}